varias - texto cortado css

¿Alguien sabe cómo utilizar el desbordamiento de texto CSS en el texto que está envolviendo?

Question

¿Alguien sabe de una manera de usar {text-overflow: ellipsis;} en un texto que se está envolviendo en una segunda línea?

Agregar {whitespace: nowrap;} hace que el desbordamiento de texto funcione, pero necesito el texto para ajustarlo, así que realmente no puedo usar eso.

Answer 1

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

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

¿Vea el fundido en el bloque de texto que presenta 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 desvanecimiento en CSS. En lugar de un desvanecimiento, también puede insertar una elipsis o alguna otra pista visual.

Por lo tanto, no lo resuelve exactamente de la manera que desea, sino que obtiene un resultado de IU similar para garantizar que el usuario esté consciente de que el contenido está truncado. Personalmente creo que es bastante bonito :-)

Answer 2

Si sabe que el contenido se ajustará a dos líneas cada vez que esta solución funcione. Uso ::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 con un color de fondo sólido, ya que necesita establecer el fondo de ::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 lo harán).