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