文本溢出：省略号似乎不起作用答案

【问题标题】：text-overflow: ellipsis doesn't appear to be working文本溢出：省略号似乎不起作用
【发布时间】：2012-07-08 23:12:45
【问题描述】：

我在无序列表中有一个导航菜单：

<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吗？见quirksmode.org/css/textoverflow.html

标签： css

【解决方案1】：

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

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

输出：

CSS：

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

【讨论】：

对我来说overflow:hidden;足够了，不需要white-space
@Zaffy 如果没有overflow: hidden;，它实际上是行不通的。
对我来说，省略号不适用于display: flex

【解决方案2】：

实际上 overflow:hidden; 是必需的，所以你可能需要这三行：

text-overflow: ellipsis; 
display: block; 
overflow: hidden;

【讨论】：