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 bination 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 pletely baffled - I'm hoping the SO munity can e 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.

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 bination 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 pletely baffled - I'm hoping the SO munity can e 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.

• javascript
• jquery
• html
• css

• Do you really have to use height: 3.5em; on the container? What if you remove that and let the div height be defined by the browser? – bfavaretto Commented Mar 19, 2012 at 19:35
• @bfavaretto - unfortunately not. As noted in the question, the full contents of the DIV are likely to be much larger than we want to see when viewing the item in a list. In other words, we must limit the height of the DIV. – mikemanne Commented Mar 19, 2012 at 19:44
• So you only want to change the height if the text is "slightly" larger than the block allows, is that correct? – Chris Sobolewski Commented Mar 19, 2012 at 19:59
• @ChrisSobolewski - that is correct. However, it's not precisely based on text-size, since it's usually not font-size that causes the cut-off effect, but rather the use of margins/padding/etc. – mikemanne Commented Mar 19, 2012 at 20:17

4 Answers 4

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/robertofrega/LkYjs/3/

It is not as ugly as when the text is simply cut.

Your trouble is ing 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