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.