Skip navigation
Currently Being Moderated

Problem with text-overflow:ellipsis

Apr 29, 2013 3:55 PM

Tags: #css

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:

 

.pnlchat {

          background-color: #2a2d2c;

          padding: 35px 35px 28px 35px;

          margin-bottom: 9px;

          max-height:100px;

}

 

And this is inline CSS:

 

<div class="pnlchat" style="overflow:hidden; white-space: normal;text-overflow:ellipsis;">

 

What am I doing wrong?

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points