Take the 2-minute tour ×

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!


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.

share|improve this question
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 Mar 19 '12 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 Mar 19 '12 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 Mar 19 '12 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 Mar 19 '12 at 20:17
add comment

4 Answers

up vote 5 down vote accepted

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.

share|improve this answer
Thanks for the quick response. You're right, it doesn't specifically solve my issue, but it is an elegant (and quick-to-implement) workaround. I'm going to try to "sell" this approach to my requirements person. Thanks! –  mikemanne Mar 19 '12 at 20:18
Tell us if it worked :-) –  Beto Frega Mar 20 '12 at 5:42
add comment

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.

share|improve this answer
Thanks for the quick response! Unfortunately, I'm probably stuck with overflow:hidden, as the client's UI policy precludes any scrolling items (other than the browser's scrollbars for the overall page). –  mikemanne Mar 19 '12 at 19:47
add comment

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

share|improve this answer
Thanks for the response. However the problem isn't with hidden content - that's known and expected. The problem is a given line of text is sometimes partially hidden ("sliced" horizontally). Perhaps I'm missing something, but I don't think simply comparing scrollHeight to clientHeight will help me address this. –  mikemanne Mar 19 '12 at 20:12
BTW: the scrollHeight-to-clientHeight comparison works fine even with overflow:hidden. It isn't dependent on the actual display of a scroll bar via overflow:auto. Just an FYI, in case you want to use your referenced technique on an overflow:hidden div. :) –  mikemanne Mar 19 '12 at 20:13
Oh cool - thanks for the heads up. I figured if the text was cut off and overflow was set to auto, the scrollbar would be detected and the height could then be adjusted via jQuery. –  Jordan Speizer Mar 19 '12 at 21:21
add comment

Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip

share|improve this answer
Thanks for the response. I've used ellipsis before - however I don't think it prevents text lines from appearing to be "sliced". Rather, it is simply a visual cue that some text has been truncated. Also, when I last used ellipsis, it was only supported in IE. –  mikemanne Mar 22 '12 at 16:08
Quick note: the latest version of Firefox (11.0) DOES seem to support the ellipsis CSS directive. –  mikemanne Mar 27 '12 at 13:39
add comment

Your Answer


