I have a panel on my page that I am trying to stop from becoming too deep, so I have set a max-height and am expecting the text to present me with '...' when the box is no longer large enough. Trouble is, it's not working. The only time I can get CSS to activate the ellipsis is if I use text-overflow:nowrap, but I need it to wrap for three lines maximum before the ellipsis kick in.
I have this a rule in my external style:
padding: 35px 35px 28px 35px;
And this is inline CSS:
<div class="pnlchat" style="overflow:hidden; white-space: normal;text-overflow:ellipsis;">
What am I doing wrong?
I like this jQuery Condense Plugin.
You can configure it to truncate text to however many characters you wish.
I have a working example below. Click the MORE+ or LESS+ links to see it in action.