CODEWITHSUNDEEP
css
Fraser
Fraser

Reputation: 14246

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

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?

Upvotes: 37

Views: 54104

Answers (2)

Etienne Dupuis
Etienne Dupuis

Reputation: 13786

Actually overflow:hidden; is required, so you'll probably need those three lines:

text-overflow: ellipsis; 
display: block; 
overflow: hidden;

Upvotes: 14

ThinkingStiff
ThinkingStiff

Reputation: 65341

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

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

Output:

enter image description here

CSS:

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

Upvotes: 51

Related Questions