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

Title does not overflow with ellipsis as browser window shrinks

Title does not overflow with ellipsis as browser window shrinks

Problem

http://jsbin.com/oqotew/edit#html,live

If you visit the link above when you have a wide browser window, the text appears to the right of the image. If you narrow the window, the text jumps down to below the image.

Goal: I want the text to always remain at the right of the image, and overflow with "..." whenever the window gets too narrow to contain it, instead of bumping it to below the image. Is that possible?

My CSS looks like this:

img { float: left; margin-right: 10px; }
.details { float: left; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C; font-size: 16px; text-decoration:none; }

Html:

Kind of a long title for a url. This should overflow with ellipsis if the browser gets narrower.
Problem courtesy of: Ian Davis

Solution

Try removing the float from .details

img { float: left; margin-right: 10px; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C;
font-size: 16px; text-decoration:none; }

Updated demo

Solution courtesy of: Matt Coughlin

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

Title does not overflow with ellipsis as browser window shrinks

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×