Как обрезать текст по ширине и по количеству строк?
Умная обрезка с Яваскриптом
В прошлом совете я показал способы обрезки текста. Напомню: обрезать можно стандартными средствами ЦСС или сверстать нестандартную обрезку самостоятельно. Стандартные средства надёжные и простые, но не дают такого простора для оформления, как нестандартные.
Как обрезать текст по ширине и по количеству строк?
Умная обрезка с Яваскриптом
Мы остановились на нестандартной обрезке градиентом:
.name {
max-width: 250px;
overflow: hidden;
position: relative;
}
.name:after {
content: '';
width: 1ch; /* Ширина — один символ */
position: absolute;
right: 0;
top: -.3em;
bottom: -.3em;
background: linear-gradient(to left, #fff, transparent);
pointer-events: none; /* Не мешает клику */
}
Такая обрезка работает нормально, пока вы точно знаете ширину контейнера и текста внутри.
Но ширина контейнера может зависеть от размера экрана, а текст может приходить из базы данных. Тогда не избежать краевых ситуаций, когда содержимое влезает впритык и градиент выглядит странно:
Научим обрезку появляться лишь когда текст не влезает в элемент:
/* Вынесем стили обрезки в универсальный класс */
.fade {
overflow: hidden;
position: relative;
}
.fade:after {
content: '';
width: 1ch;
position: absolute;
right: 0;
top: -.3em;
bottom: -.3em;
background: linear-gradient(to left, #fff, transparent);
pointer-events: none;
}
<!-- В ХТМЛ-разметке пометим отдельным классом элементы, которым может пригодиться обрезка -->
<div class="name js-may-overflow">…</div>
<!-- И добавим Яваскрипт-магии. Скрипт можно держать внизу ХТМЛ-разметки, но лучше вынести в отдельный файл -->
<script>
/* Функция найдёт все элементы .js-may-overflow и добавит класс обрезки, если содержимое шире элемента */
const checkOverflows = () => {
document.querySelectorAll('.js-may-overflow').forEach($el => {
$el.classList.toggle('fade', $el.scrollWidth > $el.clientWidth)
})
}
/* Выполним функцию после загрузки страницы… */
document.addEventListener('DOMContentLoaded', checkOverflows)
/* …и будем выполнять при изменении размера окна, потому что это может повлиять на размер элементов */
window.addEventListener('resize', checkOverflows)
</script>
Теперь стили обрезки применяются только при необходимости. Измените ширину окна и посмотрите как работает обрезка в краевых ситуациях:
Код можно доработать под задачу: проверять другие размеры, добавить компенсаторы для более точной работы. Но основной принцип не меняется: отметить элементы в разметке, найти Яваскриптом, проверить условие, если соблюдено — применить класс.
В следующем совете разберём похожий приём — сверстаем контейнер с ограниченной высотой, прокруткой и автоматическим градиентом по краям. Пытливые читатели могут попробовать повторить пример уже сейчас, подсмотрев в инструменты разработчика :‑)
1‑дом — это расширяемый дом из одного модуля для быстрого старта на платформе Бюро Горбунова. Уже доступен для заказа.
Дом состоит из одного общего модуля с кухней, бойлерной, столовой, лаунжем и туалетом. В базовой планировке выделена спальная зона, как в квартире‑студии.
Вместе с навесом занимает на участке пятно 0,8 сотки. Жилая площадь 49,2 м².
1‑дом может быть возведён как самостоятельный дом на небольшом участке или как первый модуль С‑дома или других нестандартных планировок. При расширении бойлерная и котёл в 1‑доме будут отвечать за отопление и водоснабжение и других модулей будущего дома. Модули отапливаются тёплым полом без радиаторов.
Будущая планировка должна быть определена заранее, чтобы учесть особенности участка, предусмотреть нужные интерфейсы «умной плиты» для расширения и запланировать мощность электрического и отопительного оборудования на все модули.
Напишите нам, чтобы заказать свой большой дом в Бюро Горбунова: houses@bureau.ru
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.