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.