Text-overflow: многоточие не работает - программирование

Text-overflow: многоточие не работает

У меня есть навигационное меню в неупорядоченном списке:

<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: эллипсис, поэтому я улаживаю свои ссылки в меню таким образом в своем CSS:

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

Однако желаемого эффекта не происходит. Это просто отсекает все последнее слово (и обертывает его там, где оно не видно). Что-то не так с моим кодом или есть какое-то предостережение, о котором я не знаю, с переполнением текста: эллипсисом?

4b9b3361

ОТВЕТЫ

Ответ 1

Вам нужно добавить white-space: nowrap; для text-overflow: ellipsis;.

Демо: http://jsfiddle.net/ThinkingStiff/Dc7UA/

Вывод:

enter image description here

CSS

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