我在无序列表中有一个导航菜单：
<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>
当菜单标题太长时,我需要使用文本溢出：省略号,所以我在我的CSS中像我的菜单链接样式：
header nav ul li a { text-decoration: none;
text-overflow: ellipsis;
display: block;
overflow: hidden;
width: 150px;
height: 32px;
}
然而,期望的效果不会发生.它只是切断整个最后一个字(并将其包裹在不可见的地方).我的代码有什么问题,还是有一些注意事项,我不知道文本溢出：省略号？
解决方法
你需要添加空格：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;
}
