css - 文本溢出 : ellipsis doesn't appear to be working

Question

我有一个无序列表中的导航菜单:

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

当菜单标题太长时，我需要使用 text-overflow: ellipsis 所以我在我的 CSS 中设计我的菜单链接的样式:

    header nav ul li a { text-decoration: none; 
       text-overflow: ellipsis; 
       display: block; 
       overflow: hidden; 
       width: 150px; 
       height: 32px;
}

然而，预期的效果并没有发生。它只是切断了整个最后一个词(并将其包装在不可见的地方)。我的代码有什么问题吗？或者是否有一些我不知道的关于 text-overflow: ellipsis 的注意事项？

Answer 1

您需要为 text-overflow: ellipsis; 添加 white-space: nowrap; 才能工作。

演示: http://jsfiddle.net/ThinkingStiff/Dc7UA/

输出:

CSS:

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