0

A representative code sample:

<div style="width:300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    <ul>
         <li>Long name: <span>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</span></li>
    </ul>
</div>

http://jsfiddle.net/G57LE/

It seems only the overflow property will do anything here.

How do I get the text to do an ellipsis on overflow for this div (where the ellipsis happens just before the end of the div)? Thanks!

Wes
  • 1,183
  • 3
  • 23
  • 51

2 Answers2

0

Because the text isn't in the div itself. You would have to apply the width and overflow attributes to the span itself.

Possible solution for you: CSS text ellipsis when using variable width divs

Community
  • 1
  • 1
Zestfule
  • 38
  • 6
0

add this

display: inline-block; overflow: hidden; text-overflow: ellipsis; width:300px;

to span's class .value

here is http://jsfiddle.net/G57LE/5/

Alien
  • 3,658
  • 1
  • 16
  • 33