Using text-overflow for an element with an inline-block

Question

Trying to get text-overflow: ellipsis to work on an element that has an inline-block and a floated element to the right of it. I went ahead and created a fiddle to show exactly how it's set up. But essentially there is a button that has a float: right that should stop the span with the text-overflow, but it's just pushing it down to the next line.

I know that if I set a max-width, it will work, but to me that would just be the quick solution, not the proper solution that truly fixes the issue. On the fiddle, set a max-width: 150px to the .icon-list-inline .icon-text to see what I'm talking about.

If you have any good solutions to this, besides saying set a max-width, which it seems is what most people recommend on similar S.O. questions, please let me know. Thanks for taking a look at it.

Answer 1

I would just cut out the extra <span> tags that surround your text and stick the whole thing in another div.

<div class="block">
  <span class="icon-img">
    <img src="https://cdn1.iconfinder.com/data/icons/glyph_set/128/location_pin.png" />
  </span> 
  In vehicula mi at dolor volutpat vestibulum.
</div>

and change your CSS from defining .icon-list-inline .icon-text to this:

.icon-list-inline .block {
  margin-top: 1px;
  vertical-align: middle;
  text-align: left;
  direction: ltr;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://jsfiddle.net/Qt4s8/