В веб-дизайне управление переполнением текста имеет решающее значение для поддержания чистоты и визуально приятного пользовательского интерфейса. При ограниченном пространстве длинные строки текста обычно обрезают и заменяют их многоточием (…), чтобы указать, что доступно больше контента. В этой статье мы рассмотрим различные методы достижения переполнения текста с помощью многоточия с помощью CSS. Давайте погрузимся!

Метод 1: использование свойства CSS text-overflowс ellipsis

.ellipsis-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Объяснение:
Этот метод использует свойство text-overflowсо значением ellipsisдля добавления многоточия к переполненному тексту. white-space: nowrapгарантирует, что текст останется в одной строке, а overflow: Hiddenскроет любой контент, превышающий ширину контейнера.

Метод 2. Пользовательский многоточие с помощью JavaScript

<div class="ellipsis-custom">This is a long text that needs truncating</div>

«…»;

const elements = document.querySelectorAll(".ellipsis-custom");
elements.forEach(element => {
  if (element.scrollWidth > element.clientWidth) {
    element.title = element.innerText;
  }
});

Объяснение:
Этот метод использует JavaScript для динамического добавления многоточия к тексту, когда он переполняет контейнер. Псевдоэлемент ::afterиспользуется для визуального добавления многоточия к тексту. Кроме того, код JavaScript проверяет, не выходит ли текст за пределы контейнера, и добавляет всплывающую подсказку с полным текстом в качестве атрибута title.

Метод 3: использование зажима

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

Объяснение:
Метод clampпозволяет указать диапазон количества отображаемых строк текста. В этом примере -webkit-line-clamp: 3ограничивает содержимое тремя строками. -webkit-box-orient:verticalгарантирует, что текст отображается в вертикальном направлении. Этот метод работает в современных браузерах с префиксом -webkit-.

Метод 4: CSS-сетка с переполнением и многоточием

.grid-example {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, auto);
  gap: 10px;
  max-height: 100px;
  overflow: hidden;
}
.grid-example p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Объяснение:
Этот метод использует CSS Grid для создания макета сетки для текста. Свойство max-heightограничивает высоту контейнера сетки, а overflow: Hiddenскрывает любое переполнение. Применяя text-overflow: ellipsisи white-space: nowrapк элементам

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

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

Не забудьте протестировать и настроить эти методы в соответствии с потребностями вашего проекта и совместимостью браузера. Приятного кодирования!