I have the following html:
<div class="x">
<div class="y" title="aaaaa">
<a href="/">
aaaaa
</a>
</div>
<div class="y" title="bbbbbb">
<a href="/">
bbbbbb
</a>
</div>
<div class="y" title="ccccc">
<a href="/">
ccccc
</a>
</div>
<div class="y" title="dddddddd">
<a href="/">
dddddddd
</a>
</div>
</div>
with css:
.x{
width: 10em;
background-color: #FFB9B9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.y {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 18px;
white-space: nowrap;
background-color: #E1CECE;
display: inline-block;
}
which you can see here: http://jsfiddle.net/fDBbm/
The ellipsis worked right from the start in Firefox (16.0.2) but not in Chrome (22.0.1229.94).
This is a bug that stems from using display:inline-block
and text-overflow: ellipsis
. Unfortunately Chrome doesn't handle the properties correctly when paired / used together.
The bug was reported a few months ago: http://code.google.com/p/chromium/issues/detail?id=133700
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With