Question

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:

<img src="http://placehold.it/130x65" />
<div class="details">
  <a href="#">Kind of a long title for a url. This should overflow with ellipsis if the browser gets narrower.</a>
</div>

Answer 1

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