Setting text-overflow ellipsis for a float left div or list

Question

Here's what I'd like to do:

• Create a list that only takes up as much room (horizontally) as needed (i.e. as the longest list element.

• When the list doesn't fit on the page, trim the list text and show an ellipsis.

I use a combination of white-space:nowrap and text-overflow:ellipsis. It works fine for a normal list, but in that case the list takes up the full width of the page.

To force it to only take as much space as needed I applied a float:left, but this breaks the text-overflow.

Example:

<ol style="border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Long list item. Ellipsis works.</li>
</ol>

<ol style="float:left;border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Float left list. No ellipsis here.</li>
</ol>

Live example: http://jsfiddle.net/73M7G/1/

Answer 1

because a floating element does not inherits the size from its container,

you need to specify the width:; to < ULs > too!

http://jsfiddle.net/73M7G/3/

test with width:100%;

another test http://jsfiddle.net/73M7G/6/