Limitar líneas de texto, trucar texto con CSS

Para truncar texto con CSS puedes utilizar la propiedad text-overflow en conjunto con white-space y overflow. Aquí te muestro un ejemplo:

.truncar {
  white-space: nowrap; /* evita que el texto se divida en varias líneas */
  overflow: hidden; /* oculta el texto que se desborda del contenedor */
  text-overflow: ellipsis; /* agrega puntos suspensivos al final del texto truncado */
}

Luego, en tu HTML, puedes aplicar esta clase al elemento que deseas truncar:
<p class="truncar">Este es un texto muy largo que será truncado si supera el ancho del contenedor.</p>

See the Pen Texto truncado en 1 linea by Mega Sempai (@mega-sempai) on CodePen.

Si deseas truncar el texto en dos líneas en lugar de una sola, puedes utilizar la propiedad display en conjunto con overflow y text-overflow. Aquí te muestro un ejemplo:

.truncar {
  display: -webkit-box; /* para compatibilidad con navegadores basados en WebKit */
  -webkit-line-clamp: 2; /* número máximo de líneas a mostrar */
  -webkit-box-orient: vertical; /* orientación del contenido */
  overflow: hidden; /* oculta el texto que se desborda del contenedor */
  text-overflow: ellipsis; /* agrega puntos suspensivos al final del texto truncado */
}

Luego, en tu HTML, puedes aplicar esta clase al elemento que deseas truncar:

<p class="truncar">Este es un texto muy largo que será truncado en dos líneas si supera el ancho del contenedor.</p>

En este ejemplo, el texto se truncará si supera el ancho del contenedor y se mostrarán dos líneas con puntos suspensivos al final del texto truncado. Puedes ajustar el número máximo de líneas y otros estilos de acuerdo a tus necesidades. Ten en cuenta que esta técnica funciona mejor cuando el contenedor tiene un ancho fijo.

See the Pen Untitled by Mega Sempai (@mega-sempai) on CodePen.

Deja una respuesta

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock
close