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

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

Beginner

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

Введение

В этом практическом занятии мы узнаем, как обрезать многострочный текст, превышающий размеры своего контейнера. Эта техника полезна для отображения эксцерков из длинного текста, при этом поддерживая чистый и организованный дизайн. Используя свойства CSS, такие как overflow, height и background, мы можем создать визуально привлекательное эффект обрезания, который улучшает пользовательский опыт.

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

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

В ВМ уже предоставлены index.html и style.css.

Для обрезания текста, который длиннее одной строки, следуйте шагам:

  1. Используйте overflow: hidden, чтобы предотвратить выход текста за его размеры.
  2. Задайте фиксированную ширину 400px, чтобы убедиться, что элемент имеет по крайней мере одну постоянную размерность.
  3. Задайте height: 109.2px, вычисленную из font-size, используя формулу font-size * line-height * numberOfLines (в данном случае 26 * 1.4 * 3 = 109.2).
  4. Добавьте класс truncate-text-multiline к элементу p в вашем HTML.
  5. Задайте font-size: 26px и line-height: 1.4 в CSS для класса .truncate-text-multiline.
  6. Задайте color: #333 и background: #f5f6f9, чтобы стилизовать текст.
  7. Чтобы создать градиент от transparent до background-color, добавьте следующие правила CSS к псевдоэлементу .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%);
}

Это создаст контейнер с градиентом высотой 36.4px, вычисленной для контейнера с градиентом, на основе формулы font-size * line-height (в данном случае 26 * 1.4 = 36.4). Псевдоэлемент ::after расположен в нижнем правом углу элемента .truncate-text-multiline.

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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