CSS 文本溢出：省略号似乎不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11387481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-overflow: ellipsis doesn't appear to be working
提问by Fraser
I have a nav menu in an unordered list:
我在无序列表中有一个导航菜单：
<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 & 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>
When the menu title is too long, I need to use text-overflow: ellipsis so I am styling my menu links like so in my CSS:
当菜单标题太长时，我需要使用 text-overflow: ellipsis 所以我在 CSS 中设置菜单链接的样式：
header nav ul li a { text-decoration: none;
text-overflow: ellipsis;
display: block;
overflow: hidden;
width: 150px;
height: 32px;
}
However, the desired effect is not happening. It is just cutting off the whole last word (and wrapping it where it is not visible). Is there anything wrong with my code or is there some caveat that I'm unaware of with text-overflow: ellipsis?
然而，预期的效果并没有发生。它只是切断了整个最后一个单词（并将其包装在不可见的地方）。我的代码有什么问题，还是有一些我不知道的文本溢出的警告：省略号？
回答by ThinkingStiff
You need to add white-space: nowrap;for text-overflow: ellipsis;to work.
您需要添加white-space: nowrap;的text-overflow: ellipsis;工作。
Demo:http://jsfiddle.net/ThinkingStiff/Dc7UA/
演示：http : //jsfiddle.net/ThinkingStiff/Dc7UA/
Output:
输出：
CSS:
CSS：
a {
text-decoration: none;
text-overflow: ellipsis;
display: block;
overflow: hidden;
white-space: nowrap;
width: 80px;
height: 32px;
}
回答by Etienne Dupuis
Actually overflow:hidden;is required, so you'll probably need those three lines:
实际上溢出：隐藏；是必需的，所以你可能需要这三行：
text-overflow: ellipsis;
display: block;
overflow: hidden;
