Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком.
CSS предоставляет специальное свойство для управления ситуацией с переполнением текста — text-overflow. Согласно спецификации, он может принимать разные значения, в том числе и:
Чтобы это заработало, и появилось многоточие, контейнер не должен позволять тексту переносится на следующую строку. А также требуется установить свойство overflow.
|
|
overflow: hidden; white-space: nowrap; // или height: 1em; |
На практике это сильно ограничивает область применения, т.к. получается что работает это только с одной строкой.
Многострочный вариант text-overflow
Здесь нам поможет CSS свойство line-champ, которое сейчас поддерживается всеми новыми браузерами:
|
|
// базовые стили overflow: hidden; text-overflow: ellipsis; // многострочный хак display: -webkit-box; -webkit-line-clamp: 2; // число строк -webkit-box-orient: vertical; |
Данная запись опубликована в 03.09.2021 19:04 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 14, 2025 г.
Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...
Читать
Октябрь 2, 2017 г.
Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить.
Фактически нужно сделать ...
Читать
Август 6, 2025 г.
Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так?
На деле position: sticky ...
Читать
Март 26, 2025 г.
Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
К примеру, следующее правило может не срабатывать при значении 767 пикс:
[crayon-69b93ca603be8202276005/]
Источниками проблем являются фича масштабирования и ...
Читать
Только это реально помогло для многострочного варианта. Большое спасибо