"CSS: упрощаем отображение эллипсов при переполнении span"

Быстрый ответ

Чтобы текст в элементе <span> при переполнении обрезался многоточием, нужно использовать свойство text-overflow: ellipsis;. Это свойство скрывает избыточный контент (overflow: hidden;), а с помощью white-space: nowrap; предотвращает перенос текста на новую строку.

Код CSS:

.span-ellipsis {
  display: inline-block; /* Объявляем элемент блочно-строчным для задания ширины */
  width: 150px; /* Устанавливаем максимальную ширину */
  overflow: hidden; /* Скрываем избытык контента */
  white-space: nowrap; /* Запрещаем перенос слов */
  text-overflow: ellipsis; /* Вставляем многоточие в конце */
}

Код HTML:

<span class="span-ellipsis">Такой вот текст потребуется обрезать многоточием, потому что он слишком длинный и не может уместиться в рассчитанные рамки...</span>

Вывод: Такой вот текст...

Учитываем динамическое изменение текста

Весьма интересно, не правда ли? Но следует помнить, что параметр ширины width в классе .span-ellipsis должен выбираться учитывая потенциальный размер содержимого или ширину родительского элемента.

Ломаем проклятие одной строки

Описанный выше метод применяется только для однострочного текста. Для взаимодействия с многострочным переполнением используются свойства line-clamp. Но важно помнить, что они могут не поддерживаться в старых версиях браузеров. В этом случае придётся поискать альтернативные решения.

Управление контентом при помощи JavaScript

Когда CSS не справляется, на помощь приходит JavaScript. С его помощью можно объявлять функцию add3Dots для управления содержимым и добавления многоточия.

function add3Dots(string, limit) {
  let dots = "...";
  if (string.length > limit) {
    // Обрезаем текст и добавляем многоточие
    return string.substr(0, limit – dots.length) + dots;
  }
  return string;
}

// Применяем функцию к тексту внутри элемента
document.querySelector('.span-ellipsis').textContent =
  add3Dots(document.querySelector('.span-ellipsis').textContent, 150);

Использование JavaScript расширяет возможности управления переполнением контента.

Визуализация

Воспринимайте текстовое переполнение в `<span>` как переполненную книжную полку:

Без управления переполнением:
Книжная полка: |Тут должно быть описание книги, но оно не...|

С `text-overflow: ellipsis`:
Книжная полка: |Тут должно быть...|

Такие аналогии позволяют более наглядно представить работу CSS-свойств.

jQuery для лучшего контроля над текстовым переполнением

Если вы только начинаете своё знакомство с контролем переполнения текста, рекомендуем попробовать jQuery Ellipsis плагин, который значительно упрощает эту работу. Но помните, что использование плагинов требует ответственного подхода.

Пример:

// Активируем плагин
$("#spot span").ellipsis({
  responsive: true // Включаем адаптивный режим при изменении размеров окна
});

Советы от опытного разработчика

1. Адаптивный дизайн: При определении ширины используйте единицы vw, чтобы элемент был более адаптивным.
2. Доступность: Для людей с нарушенным зрением важно использовать aria-label, чтобы передать полный текст.
3. Эффекты наведения: Рассмотрите возможность использования атрибута title или подсказок для отображения полного текста при наведении курсора.

Полезные материалы

1. text-overflow | CSS-Tricks: Подробности про свойство text-overflow.
2. text-overflow – CSS: Cascading Style Sheets | MDN: Официальная документация по text-overflow.
3. Свойство CSS text-overflow – W3Schools: Понятные объяснения и примеры использования text-overflow.
4. Свойство CSS text-overflow – CSS Portal: Ресурс для ознакомления с продвинутыми методами и тестирования совместимости с различными браузерами.