2

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.

Community
  • 1
  • 1
mikemanne
  • 3,535
  • 1
  • 22
  • 30
  • 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

4 Answers4

7

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.

Beto Frega
  • 956
  • 6
  • 21
  • 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
  • Also, this answer is from 2012... I guess I'd use CSS gradients if I did this today... (which the above tool also helps you generate..) – Beto Frega Oct 27 '15 at 12:35
  • Fun fact: briefly after this question, a client asked us for a solution very much like the one OP asked. While the backend guys were too busy implementing actually useful stuff we implemented this solution and the client proptly accepted it :) and it became our de facto solution for that kind of request – Beto Frega Oct 27 '15 at 12:41
0

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.

Jarrett Meyer
  • 19,333
  • 6
  • 58
  • 52
  • 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
0

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

Community
  • 1
  • 1
Jordan Speizer
  • 573
  • 4
  • 11
  • 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
0

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

FoxKllD
  • 971
  • 3
  • 13
  • 22
  • 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