Как обрезать текст по ширине и по количеству строк?

В прошлом совете я показал способы обрезки текста. Напомню: обрезать можно стандартными средствами ЦСС или сверстать нестандартную обрезку самостоятельно. Стандартные средства надёжные и простые, но не дают такого простора для оформления, как нестандартные.

Как обрезать текст по ширине и по количеству строк?

Мы остановились на нестандартной обрезке градиентом:

.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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы