elipses que no aparecen en el texto de desbordamiento de

tengo un título:elipses que no aparecen en el texto de desbordamiento de

<h2><a href="#">Lorem ipsum dolor dumbledore at hogwarts</a></h2>

Estoy intentando truncar el texto en varias líneas si es superior a la altura de h2:

h2 { 
    width: 200px; 
    height: 52px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

Lo que 'm esperando:

Lorem ipsum dolor 
dumbledore at...

lo que el resultado fue

Lorem ipsum dolor 
dumbledore at

¿Por qué no se muestran las elipsis?

Cuando agrego white-space: nowrap; se muestran las elipsis, pero el texto de h2 ahora es un trazador de líneas en vez de ocupar toda la altura de h2.

Lorem ipsum dolor...

Fuente

2012-10-01 Michelle

Quirksmode.org (debe leer!) Sugiere también necesita white-space: nowrap;.

Fuente

2012-10-01 07:53:43 GolezTrol

pero trunca el texto en una línea, en lugar de ocupar la altura. – Michelle

Supuestamente, la altura de una sola línea es más de la mitad de la altura de la h2. Intente configurar el 'line-height' en 26px (o más pequeño). – GolezTrol

¿podría proporcionar un violín? Intenté jugar con él, pero no puedo hacerlo funcionar. – Michelle

Puede hacerlo con un poco de engaño moderna css ver jsfidle example

body{padding: 4em;} 
h3{border:2px solid red;padding:.5em;} 

h3 { 
display: block; /* Fallback for non-webkit */ 
display: -webkit-box; 
max-width: 400px; 
height: calc(26px*1.4*4); /* Fallback for non-webkit */ 
margin: 0 auto; 
font-size: 26px; 
line-height: 1.4; 
-webkit-line-clamp:4; 
-webkit-box-orient: vertical; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </h3>

Fuente

2013-02-21 10:12:29 Plippie

elipses que no aparecen en el texto de desbordamiento de

Respuesta

Cuestiones relacionadas