LabEx
EntrarÚnete

Recortar texto multilínea

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos el uso de CSS para recortar texto multilínea a un número específico de líneas. Al utilizar la propiedad -webkit-line-clamp y otras propiedades CSS relacionadas, podemos limitar efectivamente el número de líneas que se muestran en un bloque de texto, lo que lo hace más atractivo visualmente y más fácil de leer. A través de este laboratorio, aprenderá a implementar esta técnica en sus proyectos de diseño web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Recortar texto multilínea

Puedes escribir el código en index.html y style.css..

Limita el texto multilínea a un número determinado de líneas.

  • Utiliza -webkit-line-clamp para establecer el número máximo de líneas que se mostrarán.
  • Establece display en -webkit-box y -webkit-box-orient en vertical, ya que son necesarios para que se aplique -webkit-line-clamp.
  • Aplica overflow: hidden para ocultar cualquier desbordamiento después de que se recorte el texto.
<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Resumen

¡Felicitaciones! Has completado el laboratorio de Recortar texto multilínea. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.