У меня есть следующий 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>
с помощью 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;
}
который вы можете увидеть здесь: http://jsfiddle.net/fDBbm/
Эллипсис работал с самого начала в Firefox (16.0.2), но не в Chrome (22.0.1229.94).