Última Actualización abril 14th, 2021 5:37 PM
Dic 17, 2019 NGuerrero Desarrollo Web 0
En ocasiones cuando trabajamos en una página web, nos encontramos que en un espacio donde queremos situar un texto no cabe por completo en el lugar que hemos establecido. En el siguiente artículo, recortaremos esa línea y colocaremos unos puntos suspensivos para indicar que esa frase continúa. Y lo haremos sólo CSS. Para ello, utilizaremos el atributo text-overflow con el valor clave ellipsis y lo usaremos en conjunto con el atributo overflow y un contenedor que limite su anchura.
Antes de la explicación detallada, os ofrecemos su sencilla solución:
div { width: 230px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
Y a continuación, explicamos cada uno de los atributos del ejemplo anterior:
Cuando no teníamos esta funcionalidad disponible a partir de CSS, utilizábamos programación, algo que resulta sencillo, pero que tenemos que invertir tiempo y que no ofrece la misma versatilidad. Por ejemplo, si lo hacemos a partir de PHP para gestionar la cadena y poder colocar los puntos suspensivos, nos encontraremos con el problema de la adaptabilidad al tamaño del contenedor.
Si utilizamos un diseño responsive y tiramos de programación, es posible que no quede el texto perfectamente adaptado al contenedor, por lo que se hace más sencillo aplicar CSS y sea el propio navegador el que recorte el espacio y se adapte a las dimensiones de la página. Además, nos ahorraremos código adicional y hará que la página cargue antes y tenga un mayor rendimiento.
Cuando tenemos un texto que ocupa varias líneas, el método que hemos utilizado anteriormente con el CSS no nos servirá, y esto es porque el texto siempre se va a adaptar para seguir en la siguiente línea. Para estos casos, deberemos utilizar un lenguaje de programación y gestionar la cadena para que nos muestre los puntos suspensivos.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
Powered by Facebook Comments
No related posts.
Abr 14, 2021 0
Abr 13, 2021 0
Abr 12, 2021 0
Abr 10, 2021 0
Abr 09, 2021 0
Abr 03, 2021 0
Mar 31, 2021 0
Mar 26, 2021 0
Abr 14, 2021 0
Abr 10, 2021 0
Abr 08, 2021 0
Abr 06, 2021 0
Abr 05, 2021 0