Bootstrap Text Truncation: управление длинным текстом с изяществом

В веб-дизайне обработка длинного текстового контента может быть сложной задачей. Независимо от того, это описание продукта, блоговая статья или комментарии пользователей, иногда нам нужно обрезать текст, чтобы он поместился в ограниченное пространство, сохраняя при этом читаемость. Bootstrap 5 предоставляет удобное решение для этой задачи: утилиту текстовой обрезки.

Что такое текстовая обрезка?

Текстовая обрезка заключается в обрезке длинных строк текста и замене конца на многоточие (три точки), чтобы указать, что есть еще контент за пределами видимой области. Это обычная техника, используемая в адаптивных дизайнах, особенно при работе с узкими колонками или на маленьких экранах.

Как использовать текстовую обрезку в Bootstrap 5

Чтобы обрезать текст в вашем проекте на Bootstrap 5, следуйте этим шагам:

Добавьте класс .text-truncate:
- Для блочных элементов (например, абзацев) оберните контент в <div> с классом .text-truncate.
- Для строчных элементов (например, спанов) примените класс .text-truncate напрямую.
Убедитесь в правильном свойстве отображения:
- Класс .text-truncate требует, чтобы родительский элемент имел свойство display: inline-block или display: block.
- Без правильного свойства отображения обрезка не будет работать ожидаемым образом.

Примеры

Обрезка текста для блочного элемента

<div class="row">
  <div class="col-2 text-truncate">
    Кроме того, есть определенные вещи, которые часто встречаются на дороге.
  </div>
</div>

Результат:

Кроме того, есть определенные вещи, которые часто встречаются на дороге.

В приведенном выше примере текст внутри элемента .col-2 будет обрезан многоточием, если он выходит за доступное пространство.

Обрезка текста для строчного элемента

<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Кроме того, есть определенные вещи, которые часто встречаются на дороге.
</span>

Здесь строчный текст будет обрезан в пределах указанной максимальной ширины (150 пикселей).

Результат:

Кроме того, есть определенные вещи, которые часто встречаются на дороге.

Не забудьте настроить класс и стили в соответствии с вашим конкретным случаем. Утилита текстовой обрезки Bootstrap обеспечивает компактность и визуальную привлекательность вашего контента, даже при работе с длинным текстом.

На этой странице