text-overflow：省略号似乎不工作 [英] text-overflow: ellipsis doesn't appear to be working

问题描述

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

 < ul& 
< li class =current> 
< a href =./>首页< / a> 
< / li> 
< li class => 
< a href =./ location />位置< / a> 
< / li> 
< li class => 
< a href =./ rooms-and-rates />客房&费率< / a> 
< / li> 
< li class => 
< a href =./ facilities />设施< / a> 
< / li> 
< li class => 
< a href =./ things-to-do />事情要做< / a> 
< / li> 
< li class => 
< a href =./ eating-and-drinking />饮食< / a> 
< / li> 
< / ul> 
  

当菜单标题太长时，我需要使用text-overflow：我的菜单链接在我的CSS：

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

但是，不会发生所需的效果。它只是切断整个最后一个字（和包装它在那里是不可见的）。我的代码有什么问题，或者有一些我不知道文本溢出的警告：ellipsis？

解决方案

您需要为 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; 
} 
  

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

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:

    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?

解决方案

You need to add white-space: nowrap; for text-overflow: ellipsis; to work.

Demo: http://jsfiddle.net/ThinkingStiff/Dc7UA/

Output:

CSS:

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

这篇关于text-overflow：省略号似乎不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！