CODEWITHSUNDEEP
javascriptcss
user1473635
user1473635

Reputation: 1

Place ... in the text that appears in a div with overflow hidden in javascript

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?

Upvotes: 0

Views: 220

Answers (1)

JonWarnerNet
JonWarnerNet

Reputation: 1172

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?

Upvotes: 2

Related Questions