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

Question

I have a nav menu in an unordered list:

        
    

        Home
    
               


        

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

Answer 2

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

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