Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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:

  1. Long list item. Ellipsis works.
  1. Float left list. No ellipsis here.

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

Problem courtesy of: Mark

Solution

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

you need to specify the width:; to too!

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

test with width:100%;

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

Solution courtesy of: user652649

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×