Div o elemento html con una sola linea

En ocasiones, por temas de diseo, podemos desear que nuestro elemento tenga solo una linea de texto.

Para ello:

Partimos de este ejemplo:

Esto es un elmento de una sola linea Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id interdum metus. Curabitur suscipit orci enim. In rhoncus maximus auctor. Nulla ligula ipsum, sagittis at leo in, dictum mollis dolor.

Y le aplicamos el estilo anterior:

Esto es un elmento de una sola linea Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id interdum metus. Curabitur suscipit orci enim. In rhoncus maximus auctor. Nulla ligula ipsum, sagittis at leo in, dictum mollis dolor.

En este caso tendremos scroll, y podemos ver el contenido del texto… en el caso que no queramos mostrar el resto del texto tendremos que setear la propiedad overflow a hidden.
Quedaría así

Esto es un elmento de una sola linea Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id interdum metus. Curabitur suscipit orci enim. In rhoncus maximus auctor. Nulla ligula ipsum, sagittis at leo in, dictum mollis dolor.

Y si ahora queremos truncar el texto con puntos suspensivos en css, podemos hacerlo añadiendo la propiedad text-overflow:ellipsis

Con lo que nos quedaría:

Esto es un elmento de una sola linea Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id interdum metus. Curabitur suscipit orci enim. In rhoncus maximus auctor. Nulla ligula ipsum, sagittis at leo in, dictum mollis dolor.

Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*