0

I have a div with overflow:hidden which is showing a multiline text, and I want to avoid clipped text.

Here is an example of a clipped text:

Example of a clipped text

And I want to do this in Pure CSS. (No Javascript)

If I have fixed height for my div, I can use line-height for this purpose, like this.

But, my div has height:50%... So, How to show multiline text as much as possible in my div, and also avoid text clipping?

Edit: Currently, I'm using dotdotdot ellipsis javascript plugin, also I have tested another plugin (I don't remember what the name was); but They are too slow, especially when there are many boxes to apply ellipsis to, and especially on iPad and Android tablets. (They are much faster in Chrome for Windows)

Mahdi Ghiasi
  • 14,873
  • 19
  • 71
  • 119
  • What happens with `line-height: 50%`? (I'm not able to test it myself right now). – Henrik Ammer Sep 03 '12 at 13:53
  • Do you know the number of lines and the text-size? – Chris Sep 03 '12 at 13:53
  • @Abody97 No. Also the font has not fixed-width characters... – Mahdi Ghiasi Sep 03 '12 at 13:53
  • @HenrikAmmer Text becomes sloppy. And `line-height:100%` is usual (with text clipping) – Mahdi Ghiasi Sep 03 '12 at 13:55
  • Question updated. Please read the update. – Mahdi Ghiasi Sep 03 '12 at 13:57
  • 1
    To my knowledge this is not doable in just CSS. However, it shouldn't be that a big deal with some Javascript calculations and even tablets and phones should have no problem with it. It's all about, knowing the line-height of the type and then see if the containers height can be split without modulus with the line-height. If not, change the height. – Henrik Ammer Sep 03 '12 at 14:01
  • But, even just changing the size of boxes is slow on tablets. see my other problem: http://stackoverflow.com/questions/12248212/can-i-do-this-in-pure-css-instead-of-using-jquery – Mahdi Ghiasi Sep 03 '12 at 14:02

1 Answers1

0

Set the height of the #text div in your example to 100%. It then uses the full height and displays the maximum of text in the div #container.

See this fiddle: updated fiddle

der_chirurg
  • 1,475
  • 2
  • 16
  • 26