ellipsis in css works in Firefox (16.0.2) but not in Chrome (22.0.1229.94)

Question

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).

Braswell

Answer 1

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

Budd

Two years later and it's still not fixed. GG Google. Also, check out that issue ID. – Lindesnes

Answer 2

As a workaround you could use display:inline instead of display:inline-block;

FIDDLE

However, this causes the individual 'y' elements to lose their background color...

So to fix that we could add:

.y:after {
    content: '';
    display: inline-block;
}

FIDDLE

Now it's working in FF and Chrome (and BTW, IE as well).

Templet