2

If I have something like the following, then how can I hide the lines that don't fully fit? In this example, only the first 2 lines fit fully, with my default font, but the 3rd line only fits partially. I'd like that line to disappear completely (something similar to text-overflow, but for height).

<div style="position: absolute; top: 85%; bottom: 10%; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa.
</div>

(fiddle)

This is what it looks like for me, and I'd like to get rid of the line after "Mauris et":

rid
  • 54,159
  • 26
  • 138
  • 178
  • just change the size of the height to 2.4 and it erases it – Keith Jul 19 '13 at 17:30
  • The height is really important. Can you clarify on how you are not able to control the height here but still have an overflow? That would be a more appropriate fiddle. As it is, your fiddle does not really reproduce the issue. – Travis J Jul 19 '13 at 17:30
  • @TravisJ, question and fiddle updated. – rid Jul 19 '13 at 17:32
  • @rid - In the new fiddle, I only see one line of text. – Travis J Jul 19 '13 at 17:33
  • @TravisJ, if you resize the window, depending on your screen size, you'll see 1 and a half. Playing with the `top` and `bottom` properties will make it clearer. (that's why I initially used `2.8em`, since that was almost certain to make the issue apparent) – rid Jul 19 '13 at 17:34
  • @rid - Okay, I was able to reproduce it by changing the window. – Travis J Jul 19 '13 at 17:36

3 Answers3

2

The only thing I know of is a -webkit-line-clamp. There may be other solutions for other browsers. You can also take a look at: http://css-tricks.com/line-clampin/

I would avoid that however and set the height to 2 lines of text if you can. So if the line-height is 15px, set the height to 30px for 2 lines, provided there isn't any other margins or padding.

fanfavorite
  • 4,916
  • 1
  • 28
  • 56
  • `-webkit-line-clamp` looks almost perfect! I'm also targeting only a certain WebKit browser, so that would work out nicely. Is there something similar without a number of lines? – rid Jul 19 '13 at 17:41
  • Ah, now I understand how this works... I don't give it a height, but instead the height gets calculated automatically based on how many lines I specified... Certainly not ideal, but it could work with some design changes... – rid Jul 19 '13 at 17:48
  • Without javascript I don't believe so. You would need to divide the actual height by the line-height, rounding down to the nearest whole number and setting that as the css value for line clamp. – fanfavorite Jul 19 '13 at 17:51
  • Indeed... Ideally, it would only cut off the lines that don't fit in an arbitrarily sized container. I could use JavaScript to calculate how many lines there are and how large the container is, then set the line clamp value accordingly. – rid Jul 19 '13 at 17:53
2

You can take half of the height of the div and apply that value to the line-height like this:

<div style="height: 2.8em; line-height: 1.4em; overflow: hidden; background: lightblue;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa. Maecenas ultricies semper tellus ac condimentum. Integer imperdiet aliquam sapien, at porta dolor commodo ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque viverra nulla ut turpis fringilla auctor. In iaculis euismod lorem, ut eleifend libero rhoncus a. Vestibulum egestas rhoncus sem, vel ultricies enim lobortis at.
</div>

This seems to work for any height as long as you set the line-height to a multiple of the container's height. For example, a div with a height of 6.3em with a line-height of 2.1em will fit perfectly (6.3 / 3 = 2.1em). Also, 6.3em / 2 = 3.15em which might be too much spacing but you can take the 3.15em and divide by 2 again to get 1.575em which also fits the text perfectly.

Aaron
  • 9,226
  • 13
  • 35
  • 53
0

Just set the height to 2.4em. Here is a working fiddle: http://jsfiddle.net/Hive7/dw25k/5/

  • As I was saying, the height is not fixed. The height is a percent of the parent. – rid Jul 19 '13 at 17:36
  • sorry my bad either use line-height or font-size –  Jul 19 '13 at 17:37
  • But that would change the whole design. I need to keep both the font size and the line spacing as they are. – rid Jul 19 '13 at 17:38
  • What do you mean by "using if element is hidden"? – rid Jul 19 '13 at 17:41
  • Have a loom at this http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery –  Jul 19 '13 at 17:42
  • I mean you could split the text up and then use display: inline on the elements then if the element with the bottom bit of text in is hidden then give it a margin-top of whatever –  Jul 19 '13 at 17:45
  • So have a `` for each word? – rid Jul 19 '13 at 17:46
  • or p or whatever then give them a style of display: inline. It would rake a while but some things take time –  Jul 19 '13 at 17:46