overflow the contents of one div into another div - javascript

I have 2 divs on a page and the first div has text content only.
Currently, when the content of the first div overflows it gets truncated since the CSS for the first div is:
.one {
overflow: hidden
width: 100%;
white-space: nowrap;
}
But on an overflow, could I make the overflow text appear in a 2nd div?
For example, let's say the text content in the first div is "Hello there" and it displays "Hello" but "there" is cut off because of overflow hidden, can I make "there" appear in a 2nd div?
I'm sure this is not out the box behaviour but I wondered if its possible or if anyone knows a lib to do this. Thanks.

The native capacities of CSS do not allow for this kind of behaviour, since it is quite special.
If you want to manipulate the text so that it gets displayed in different parts of your DOM, depending on a determinate critera, you will have to use Javascript to do so.
Use Javascript to create a kind of parser that detects if the text matches the criteria needed to separate them, and if it does so, manipulate the content so that it is displayed in the correct element.
EDIT:
If what you are trying to do, though, is basically format differently the first line from the rest of the text, what you might need is simple the ::fist-line pseudoselector.
This way you can set the first line to have a determinate size, color, etc.Notice though that only a certain amount of properties can be applied to this selector.

I had this exact problem tonight. I have 2 divs side by side, I want the text of the first div to spill over into the 2nd div if needed. I solved it with z-index, make the div with the text that spills out have a higher z-index than the adjacent one that you want to spill over.

Related

A paragraph visible when entering a div zone

I am new at jQuery, and I am trying to do an effect.
The effect consist on a slide in to a visible div. I need the children to be visible when it enters the div, but just the words that are IN the div zone.
Is this possible?
I've been searching for a long time and I have not found anything.
I attached an example image.
You should use overflow: hidden; in your CSS.
Here's a guide to the overflow property:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
It has examples at the bottom if you're not that used to using CSS

Get html content that is vertically overflowing container

Is there a way to select all child content beyond a certain parent height using javascript? For example: I have a two column layout with a fixed height. If the content inside column one is vertically overflowing I want to be able to move the overflowed content to column two so I need a way to select it.
I have no trouble detecting if content is overflowing using this technique but I can't figure out a way to select the overflowed content.
With javascript, you can count the number of words that fit in the first column of a two-column layout. You could do this "offscreen" -- where the user won't see it -- by making a copy of the first column just for measurement purposes. For example, give a container an absolute position that's way out of bounds (like, top: -10000px, left: -10000px). Other than the positioning, give it the exact same css (font, line-height, etc.) as the first column in your two-column layout. Using javascript, keep adding words, one at a time, to the container. After you add each word, check if the container has overflowed or not. Once you've reach that point, that's what will fit in your first column (minus the word that actually made it overflow); the rest of the string (including that word) goes into the second column.

Custom HTML select menu

So as you know if you have a select, it stretches the container to accommodate the longest length option.
I have a truncate function that is basically a substr, length of 20, add periods to the end so it does not stretch it.
I have searched but either i am not searching right or it doesn't exist, but i want to be able to click on the select and it show the entire option OVER the page and not push the surrounding elements. A position fixed so to speak, except not because i dont want the page to scroll around the select.
Anyone know of any plugins or anything that do this?
EXAMPLE
This is a really...
This is done so it does not stretch the entire TD element it is in. Now when i click on the select to view the choices, i would like it to actually show
This is a really long sentence that was truncated.
HOWEVER i do not want it to push the TD cell's width when displaying it, so a hide/show of different select menus would not work, as that would push the width.
The simplest way to do it would be to convert the <select> to a bootstrap dropdown.
I'm not sure if this is a stupid answer. But have you tried position:absolute;?
CSS does some wonderful tricks.
Also, the periods at the end of a sentence can be done wih css, using white-space: nowrap; text-overflow: ellipsis; overflow: hidden.

Set DIV height so text is not cut or sliced horizontally

Is there any JS/CSS/jQuery magic I can work to identify whether the last visible bit of content in a div is being cut off, and slightly increase/decrease the DIV's height to prevent the cut off text?
Our system allows the user to enter "elements" containing XHTML (using a Telerik Edit control). We have an ElementList page, where we show all the user-entered elements. However, since the user-entered XHTML can be very large, on the list page we only want to show the first 3 lines of each. So I set the DIV containing the XHTML to a specific height equal to 3 rows of text, and set overflow: hidden. So far, so good.
However, since the user can enter XHTML, they can create tables with padding (or otherwise diverge from standard text height). The text within those cells appears to be sliced off horizontally, due to the combination of height and overflow: hidden. Our requirements person doesn't like the look of this; but of course we cannot restrict the XHTML editable by the end user.
Here is a JSFiddle example of the issue.
This question is not a duplicate of:
"Stopping cut off text in variable height div..." as that question involves "webkit-line-clamp" which is irrelevant to my situation. (and in any case, that question was never answered)
"Cut text by height, no truncate" as that question is about a DIV containing pure text; my DIV contains XHTML. You'll note in the JSFiddle that I'm already sizing the DIV height using the em measurement.
This issue has me completely baffled - I'm hoping the SO community can come to my rescue!
UPDATE:
Ultimately, I suspect this cannot be resolved using HTML/JS/jQuery. In fact, you can craft a table (or series of DIVs) with gradually increasing top-margins, such that there's no way to avoid slicing at least one of them.
Thanks to all for their responses. I'm marking one as an answer, because in my opinion, it's a particularly simple/elegant workaround.
This is not the solution you were looking for, but it might be a good design workaround.
I put a white gradient in the bottom of the div, so that it creates sort of a "visual ellipsis"
Take a look: http://jsfiddle.net/robertofrega/LkYjs/3/
It is not as ugly as when the text is simply cut.
Your trouble is coming from overflow:hidden;. This line is doing exactly what you tell it to do, namely hiding the overflow. Can you use overflow-y: auto or something like that? That along with a grippy (like SO uses on its text areas), should help you out.
Instead of having overflow:hidden, you could set it to auto and then check for the presence of a scrollbar upon submission of the content. See this thread:
detect elements overflow using jquery
Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip

Is it possible to wrap lots of text exactly three times, then add a more link?

I have a long description of something, it has been requested that my HTML magically detect when the text has wrapped three times, cut off the text, and add a "more..." link appended to the last of the 3rd line of the text.
Is this even possible? And if so, how do I do this?
Unless you're using a mono-spaced font, it won't be too easy, since different letters are different width. If you are fine with a count of characters, you could calculate do a JS method and only populate a sub-string of your found length and make a link/ellipsis to denote there is more.
A method you can use to accomplish your goal is to use div tag with a height of exactly your 3 lines of text (you will have some trial/error) and specify your desired width. HTML will auto-wrap within this width. You then need to give the div tag the style property of overflow:hidden.
Doing this will hide the remaining text after 3 lines.
Then you can left/right justify a "More..." link below... I would do this programmatically in the JS so you don't have a "More..." link after a description equal or less than 3 lines

Categories