10

私は次の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）では機能しませんでした。

4

2 に答える 2

5

display:inline-blockこれは、とを使用することに起因するバグですtext-overflow: ellipsis。残念ながら、Chromeはペアリング/併用するとプロパティを正しく処理しません。

バグは数ヶ月前に報告されました：http ：//code.google.com/p/chromium/issues/detail？id = 133700

于 2012-12-07T14:40:14.583 に答える
0

display:inline回避策として、代わりに使用できますdisplay:inline-block;

フィドル

ただし、これにより、個々の「y」要素の背景色が失われます。

したがって、これを修正するには、次のように追加できます。

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

フィドル

現在、FFとChrome（そしてところで、IEも）で動作しています。

于 2014-08-28T06:36:54.670 に答える