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 SO questions, please let me know. Thanks for taking a look at it.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.