Обрезка текста с многоточием в dropdown CSS без JavaScript

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

Если вы хотите, чтобы текст, не помещающийся в выпадающем списке, был обрезан и заменён на многоточие, используйте CSS. Примените свойство text-overflow: ellipsis к элементам select и option. Для предотвращения переноса строки задайте white-space: nowrap и overflow: hidden. Помимо этого текст, выходящий за границы, будет заменён на многоточие. Помните, что стили выпадающих списков в разных браузерах могут отображаться по-разному.

select, select option {
  width: 150px; /* Настройте ширину под свой проект */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

В случае, если свойство text-overflow: ellipsis не поддерживается браузером, можно применить отступы чтобы избежать наложений текста. Это не идеал, но решение проблемы временное.

Что делать с браузерами, не поддерживающими многоточие?

В числе прочих, браузер Chrome начал поддерживать свойство text-overflow: ellipsis для элементов <select> только в июле 2020 года. При работе со старыми версиями браузера или другими браузерами, использование отступов становится надёжной альтернативой. Этот подход поможет аккуратно организовать текст, когда другие методы не подходят.

Без применения JavaScript

Если в вашем проекте не предполагается подключение сторонних библиотек JavaScript, рекомендуем рассмотреть такие библиотеки, как Chosen, для настройки элементов <select>, минуя использование тяжёлых JS-фреймворков.

Удаление стрелки выпадающего списка

Стрелку из выпадающего списка можно убрать – это как аккуратно постричь волосы перед важным событием: список приобретает элегантный и стильный вид.

Оформление выпадающего списка с помощью CSS

Каждый хоть раз в жизни менял стиль своей одежды, не так ли? Воспользуйтесь свойствами border-style и background, чтобы придать списку индивидуальность, вроде настраиваемого фильтра в Instagram.

Обрезка строк на сервере

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

Динамическое обновление выпадающего списка с использованием JavaScript

С помощью JavaScript можно добиться большей динамики в интерфейсе: обновлять выпадающий список в соответствии с действиями пользователя и в реальном времени.

Использование псевдоэлементов для дополнительной стилизации

С помощью псевдоэлементов – настоящего мастерства в CSS – можно с лёгкостью изменять внешний вид элементов, например, добавлять многоточие в <select>. Селектор pointer-events обеспечит непрерывное взаимодействие пользователя с выпадающим списком.

Выбор длины текста в зависимости от условий

Специфические данные, хранящиеся в атрибуте dataset, позволяют совместно с JavaScript настраивать содержимое контейнера в соответствии с выбором пользователя.

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

Для ограничения длины текста в выпадающем списке:

[Короткая Фраза, Длинная Фраза, Фраза Нуждающаяся В Обрезке, Ещё Одна Очень Длинная Фраза]

Мы стремимся добиться следующего эффекта с помощью многоточия:

[Короткая Фраза, Длинная Фра..., Ещё Одна Дл... Фраза]

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

Применение свойств CSS

Мы хотим поделиться с вами некоторыми секретами применения CSS.

Использование отступов для скрытия текста

Если возникает перекрытие текста в браузерах, которые не поддерживают text-overflow: ellipsis, вы можете прибегнуть к применению отступов. Для этого используйте следующий код:

select {
  -webkit-padding-end: 25px; /* Несмотря на присущую ему странность, данный код корректно работает в iOS */
  padding-right: 25px; /* Настраиваем этот параметр для достижения аккуратного вида */
}

Помните о необходимости настройки параметров -webkit-padding-start и -webkit-padding-end для корректного отображения на iOS.

Подробнее об этом расскажет наш спикер на видео

Декорирование с помощью границ и фона

Настройте стили границы и фона, чтобы ваш список выглядел уникально и ярко:

select {
  border: 1px solid #000; /* Выберите подходящий для вас цвет */
  background-color: #fff; /* Это ваш холст для творчества! */
}

Обработка длины текста на стороне сервера

В силу непредсказуемости поведения клиентской части, необходимо обращаться к серверу. Он поможет установить чёткие ограничения на длину текста для одинакового отображения в различных браузерах.

truncate("Очень длинная строка, которая выглядит как Ниагарский водопад", length: 25) /* Текст становится управляемым, как тихий ручеёк */

Динамическое обновление содержимого с помощью JavaScript

JavaScript не только обслуживает события. Он также может оживить вашу стилизацию и функциональность:

document.querySelector('select').addEventListener('change', function() {
  this.setAttribute('data-content', this.options[this.selectedIndex].text);
  // Таким образом, выпадающий список мгновенно преобразуется, обновляя свое содержимое.
});

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

1. Полное руководство по элементу Table | CSS-Tricks
2. Применение многоколоночного макета – CSS: Cascade Style Sheets | MDN
3. Редактор W3Schools Tryit
4. Обрезка строки (Усечение текста в несколько строк) | CSS-Tricks
5. "text-overflow" | Слежу за поддержкой... Таблицы поддержки для HTML5, CSS3 и т. д.
6. Модуль CSS Overflow Уровень 3