Truncar texto de varias líneas: Una técnica CSS práctica

Introducción

En este laboratorio, aprenderemos cómo truncar texto de varias líneas que excede las dimensiones de su contenedor. Esta técnica es útil para mostrar extractos de texto más largo mientras se mantiene un diseño limpio y organizado. Al utilizar propiedades CSS como overflow, height y background, podemos crear un efecto de truncamiento visualmente atractivo que mejora la experiencia del usuario.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35252{{"Truncar texto de varias líneas"}} css/colors -.-> lab-35252{{"Truncar texto de varias líneas"}} css/text_styling -.-> lab-35252{{"Truncar texto de varias líneas"}} css/width_and_height -.-> lab-35252{{"Truncar texto de varias líneas"}} css/positioning -.-> lab-35252{{"Truncar texto de varias líneas"}} css/backgrounds -.-> lab-35252{{"Truncar texto de varias líneas"}} css/pseudo_elements -.-> lab-35252{{"Truncar texto de varias líneas"}} end

Truncar texto de varias líneas

index.html y style.css ya se han proporcionado en la VM.

Para truncar texto que tiene más de una línea, siga estos pasos:

Utilice overflow: hidden para evitar que el texto desborde sus dimensiones.
Establezca un ancho fijo de 400px para garantizar que el elemento tenga al menos una dimensión constante.
Establezca height: 109.2px según se calculó a partir del font-size, utilizando la fórmula font-size * line-height * numberOfLines (en este caso 26 * 1.4 * 3 = 109.2).
Agregue la clase truncate-text-multiline al elemento p en su HTML.
Establezca font-size: 26px y line-height: 1.4 en el CSS para la clase .truncate-text-multiline.
Establezca color: #333 y background: #f5f6f9 para dar estilo al texto.
Para crear un degradado desde transparent hasta el background-color, agregue las siguientes reglas CSS al pseudo-elemento .truncate-text-multiline::after:

.truncate-text-multiline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

Esto creará un contenedor de degradado con una altura de 36.4px, calculada para el contenedor de degradado, basada en la fórmula font-size * line-height (en este caso 26 * 1.4 = 36.4). El pseudo-elemento ::after se coloca en la esquina inferior derecha del elemento .truncate-text-multiline.

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Truncar texto de varias líneas. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.