Question

我遇到了同样的问题：text-overflow: ellipsis doesn't appear to be working

小提琴：http://jsfiddle.net/ThinkingStiff/Dc7UA/

ul a { 
    text-decoration: none; 
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap;
    width: 80px; 
    height: 32px;
}

问题是，它只适用于Firefox。 IE会搞乱子弹指标。它将隐藏子弹指示器。

有没有办法让它们像Firefox一样工作？

下面的相关代码和摘要

＆＃13;

ul a { 
    text-decoration: none; 
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap;
    width: 80px; 
    height: 32px;
}

＆＃13;

<ul>        
    <li class="current">
        <a href="./">Home</a>
    </li>           
    <li class="">
        <a href="./location/">Location</a>
    </li>           
    <li class="">
        <a href="./rooms-and-rates/">Rooms &amp; Rates </a>
    </li>           
    <li class="">
        <a href="./facilities/">Facilities</a>
    </li>           
    <li class="">
        <a href="./things-to-do/">Things to do</a>
    </li>           
    <li class="">
        <a href="./eating-and-drinking/">Eating and Drinking</a>
    </li>           
</ul>

＆＃13;

Answer 1

我所做的更改是设置font-size＆amp; font-family只是为了确保它是一致的。然后我允许高度自动而不是手动设置。我将显示更新为inline-block以获得更好的显示效果，并使用列表项本身来创建间距。

<强> CSS：

li {
    margin: 0 0 5px;
}

ul a {
    text-decoration: none;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 14px;
    font-family: Arial;
    width: 80px;
    height: auto;
}

Working Example

<li>文字溢出。不同浏览器的结果不同

1 个答案: