Here’s what I’d like to do: Create a list that only takes up as

Question

0

Editorial Team

Asked: May 26, 20262026-05-26T03:52:33+00:00 2026-05-26T03:52:33+00:00

Here’s what I’d like to do: Create a list that only takes up as

0

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/