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

Метод 1: переполнение текста: многоточие;

Самый простой способ добиться эффекта «точка-точка-точка» в CSS — использовать свойство text-overflowсо значением ellipsis. Этот метод работает, когда текст находится внутри контейнера с фиксированной шириной и к нему применены overflow: Hiddenи white-space: nowrap. Вот пример:

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Метод 2: усечение на основе JavaScript

Если вам нужен больший контроль над процессом усечения, вы можете использовать JavaScript для динамического достижения эффекта «точка-точка-точка». Вот пример использования jQuery:

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<script>
$(document).ready(function() {
  $('.text').each(function() {
    var $this = $(this);
    if ($this.text().length > 30) {
      $this.text($this.text().substr(0, 30) + '...');
    }
  });
});
</script>

Метод 3: функция Clamp()

Функция clamp() — это функция CSS, которая позволяет вам устанавливать минимальный и максимальный размер элемента в зависимости от доступного пространства. Объединив его со свойством overflow: Hidden, мы можем добиться эффекта «точка-точка-точка». Вот пример:

.container {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

Еще один умный способ добиться эффекта «точка-точка» — использовать псевдоэлементы CSS. Мы можем использовать псевдоэлемент ::after, чтобы добавить многоточие в конце усеченного текста. Вот пример:

‘…’;
позиция: абсолютная;
справа: 0;
снизу: 0;
фон: белый;
отступ: 0 5 пикселей;

В этой статье мы рассмотрели различные методы достижения эффекта «точка-точка CSS» для усечения текста в веб-дизайне. От простого подхода text-overflow: ellipsisдо усечения на основе JavaScript, функции зажима() и использования псевдоэлементов — теперь у вас есть набор методов для улучшения визуальной привлекательности и читаемости вашего текста. веб-страница. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим конкретным требованиям. Приятного кодирования!