CSS y Tailwind

¡Claro! Limitar la altura y mostrar un “más…” (truncamiento) con CSS y Tailwind es una tarea común. Aquí te explico cómo hacerlo, paso a paso, con algunos ejemplos.

Concepto Básico

La idea es usar max-height para limitar la altura del contenido. Cuando el contenido excede esa altura, usaremos overflow: hidden para ocultar el resto. Para el “más…”, necesitaremos un elemento adicional y algo de JavaScript si queremos una funcionalidad interactiva. Si solo es un indicador visual, se puede hacer puramente con CSS.

Método 1: Truncamiento Básico con CSS (solo visual)

Este método es el más sencillo si solo quieres que el texto se trunque visualmente y no necesitas una opción de “ver más” interactiva.

HTML:

<div class="truncated-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Este es un segundo párrafo que también será truncado si el contenido es demasiado largo.</p>
</div>

CSS (en un archivo CSS o en una sección <style>):

.truncated-text {
  max-height: 100px; /* Ajusta esto a la altura deseada */
  overflow: hidden;
  position: relative;
}

.truncated-text::after {
  content: "Más...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* O el color de fondo de tu contenedor */
  padding: 0 5px;
  /* Opcional: para un desvanecimiento */
  background: linear-gradient(to right, transparent, white 50%);
}

Con TailwindCSS:

Para aplicar estas propiedades con Tailwind, puedes usar las clases directamente en tu HTML o crear una clase personalizada en tu CSS que use las directivas @apply.

HTML (con clases Tailwind):

<div class="relative max-h-24 overflow-hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Este es un segundo párrafo que también será truncado si el contenido es demasiado largo.</p>
  <div class="absolute bottom-0 right-0 bg-white px-2 py-1 text-sm">Más...</div>
  <!-- Para el efecto de desvanecimiento, necesitarías un div con un gradiente -->
  <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white to-transparent"></div>
</div>

Aquí tienes una visualización de cómo se vería: `

`

Explicación de las clases Tailwind:

• relative: Necesario para que absolute funcione correctamente con los elementos internos.
• max-h-24: Establece un max-height de 6rem (96px). Puedes ajustar el valor (max-h-32, max-h-48, etc.) según tus necesidades.
• overflow-hidden: Oculta el contenido que excede el max-height.
• absolute bottom-0 right-0: Posiciona el elemento “Más…” en la esquina inferior derecha.
• bg-white px-2 py-1 text-sm: Estilos para el texto “Más…”.
• inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white to-transparent: Este div crea el efecto de desvanecimiento. h-10 le da una altura, y el gradiente de fondo va de blanco (o el color de tu fondo) a transparente.

Método 2: Truncamiento con Botón “Leer Más” (con JavaScript)

Este es el método más común para una experiencia de usuario completa, donde el usuario puede expandir y contraer el contenido.

HTML: