0

I have a div with this CSS class:

.textodiv{ height:29px;overflow:hidden;}

The size of the text that appears is very variable. With the CSS above, it appears about 2 lines and hides the rest. So there you have it as I wanted. The problem is that I want to put three dots at the end of the text being displayed to give the idea of continuity. But how how far the text is displayed? I tried to limit the number of characters, but not as the font of fixed size and the line break changes according to the size of the words, this solution does not effective.

Any suggestions?

Mariusz Jamro
  • 30,615
  • 24
  • 120
  • 162
user1473635
  • 1
  • 1

1 Answers1

2

For a single line approach you can do this through CSS, add the following to your css rule:

text-overflow: ellipsis;
white-space: nowrap;

If you want multiple lines you will have to use a JavaScript approach, which can be found at:
Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

Community
  • 1
  • 1
JonWarnerNet
  • 1,112
  • 9
  • 19
  • Don't forget white-space:nowrap – Gabriel Isenberg Jun 22 '12 at 03:02
  • I put white-space:nowrap too, but after this, the text was in just one line and I need to stay in 2 rows and place that does not fit the three dots. when I took white-space:nowrap, text-overflow: ellipsis had no effect. – user1473635 Jun 22 '12 at 03:29
  • I don' think that'd be possible with a CSS solution, for JavaScript solutions see answers to the following question: http://stackoverflow.com/q/3404508/1441046 – JonWarnerNet Jun 22 '12 at 03:36