2010-03-05 12 views
19

¿Alguien sabe de una forma de usar {text-overflow: ellipsis;} en una parte del texto que se ajusta a una segunda línea?¿Alguien sabe una forma de usar el desbordamiento de texto CSS en el texto que está envolviendo?

Al agregar {whitespace: nowrap;} hace que el desbordamiento de texto funcione, pero necesito que el texto se ajuste para que no pueda usarlo.

+1

Lo que está causando mi problema es no configurar el desbordamiento en oculto, es el espacio en blanco: nowrap que parece ser necesario para que funcione el desbordamiento de texto. Necesito la elipsis para aparecer después de la segunda línea de texto, que no puedo descifrar cómo hacerlo. –

+1

Elija una respuesta, publique la solución a la que llegó o indique que las respuestas dadas no son aceptables para su caso. ¡Gracias! – kroehre

Respuesta

2

Estoy bastante seguro de que lo que estás tratando de hacer es imposible en una solución pura de CSS. Sin embargo, hay una forma de piratear juntos un resultado similar. Esto es lo que hice:

http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication

Ver el fundido en el bloque de texto introduciendo cada curso? Eso se hizo primero restringiendo el desbordamiento de la manera habitual y luego colocando otro div encima de la última línea e implementando el fundido en CSS. En lugar de un fundido también podría insertar una elipsis o alguna otra pista visual.

Por lo tanto, no lo resuelve exactamente de la manera que desea, pero logra un resultado de IU similar para garantizar que el usuario sepa que el contenido se trunca. Personalmente, creo que es bastante bonito :-)

+0

Solución creativa, ¡agradable! –

2

Si sabes que el contenido se ajustará a dos líneas cada vez que esta solución funcione. Use ::after y contenido: '...'; y luego colóquelo sobre la esquina inferior derecha de su tipo (que debería ser un elemento de nivel de bloque). Esto solo funcionará si está trabajando contra un fondo de color sólido ya que necesita configurar el fondo del ::after para que coincida.

La única desventaja son los parámetros limitados en los que puede tener éxito y el hecho de que reducirá un personaje a la mitad si las cosas no se alinean correctamente (lo que probablemente no ocurra).

Cuestiones relacionadas