Setting text-overflow ellipsis for a float left div or list
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
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.
Live example: http://jsfiddle.net/73M7G/1/
because a floating element does not inherits the size from its container,
you need to specify the width:; to too!
test with width:100%;
another test http://jsfiddle.net/73M7G/6/
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here