LabEx
ВходРегистрация

Обрезание многострочного текста

Beginner

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

Введение

В этом практическом занятии мы изучим применение CSS для обрезания многострочного текста до заданного количества строк. С помощью свойства -webkit-line-clamp и других связанных свойств CSS мы можем эффективно ограничивать количество строк, отображаемых в блоке текста, делая его более наглядным и удобным для чтения. В ходе этого практического занятия вы научитесь применять эту технику в своих веб-дизайн-проектах.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Обрезание многострочного текста

Вы можете написать код в index.html и style.css..

Ограничьте многострочный текст заданным количеством строк.

  • Используйте -webkit-line-clamp, чтобы установить максимальное количество строк для отображения.
  • Установите display в -webkit-box, а -webkit-box-orient в vertical, так как они необходимы для применения -webkit-line-clamp.
  • Примените overflow: hidden, чтобы скрыть любое переполнение после обрезания текста.
<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;
}

Резюме

Поздравляем! Вы завершили практическое занятие по обрезанию многострочного текста. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.