text-overflow: ellipsis doesn't appear to be working

Question

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?

Answer 1

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; }