css - with - Desbordamiento de texto: la elipsis no parece estar funcionando

truncar texto con puntos suspensivos

Question

Tengo un menú de navegación en una lista desordenada:

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

Cuando el título del menú es demasiado largo, necesito usar texto desbordado: puntos suspensivos, así que estoy diseñando el estilo de mis enlaces de menú en mi CSS:

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

Sin embargo, el efecto deseado no está sucediendo. Solo está cortando toda la última palabra (y envolviéndola donde no es visible). ¿Hay algún problema con mi código o hay alguna advertencia que no conozco con el desbordamiento de texto: puntos suspensivos?

Answer 1

En realidad desbordamiento: oculto; es obligatorio, por lo que probablemente necesitarás esas tres líneas:

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

Answer 2

Es necesario agregar white-space: nowrap; para text-overflow: ellipsis; de text-overflow: ellipsis; trabajar.

Demostración: http://jsfiddle.net/ThinkingStiff/Dc7UA/

Salida:

CSS:

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