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

Раньше, чтобы красиво обрезать текст и добавить многоточие, разработчикам приходилось использовать JavaScript. Это было неудобно: скрипты тормозили загрузку страницы и усложняли код. Как было бы хорошо, если бы такая задача решалась средствами стилей… И высшие силы разработчиков CSS нас услышали!

Давайте же наконец перейдём к хукам в CSS по обрезке и переносу текста:

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

Классический вариант — свойство text-overflow: ellipsis;, которое работает вместе с white-space и overflow.

Так текст, который не помещается в строку, будет обрезан и дополнен многоточием.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Пример, где я использую такую обрезку - breadcrumbs на мобилке.

<nav class="breadcrumbs">
    <ul>
        <li>
            <a href="/">Главная</a>
        </li>
        <li>
            <a href="/catalog">Каталог</a>
        </li>
        <li>
            <span class="active">Мега длинное наименование товара</span>
        </li>
    </ul>
</nav>

<style>
.breadcrumbs {
    font-size: 14px;
    margin: 30px 0;
}

.breadcrumbs ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs a,
.breadcrumbs li,
.breadcrumbs span {
    display: inline;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin: 0 8px;
    color: var(--text-secondary);
}

.breadcrumbs li a {
    text-decoration: none;
    color: var(--text-secondary);
}

.breadcrumbs .active {
    color: var(--accent);
}
</style>

Также обрезку текста в одну строку можно использовать и в полях ввода, к тексту, что находится в placeholder :


<input type="text" placeholder="Очень длинный текст в поле ввода" />

<style>
input:placeholder-shown {
	text-overflow: ellipsis;
}
</style>

Обрезка по количеству строк

Если же нужно ограничить не одной строкой, а, например, двумя, используется комбинация свойств с -webkit-line-clamp.

Это уже даёт более гибкий контроль за длиной текста.

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

Можно использовать для превью описания товара/статьи.

Перенос слов в заголовках и параграфах

А это бонус! Совсем недавно узнал об этом свойстве переноса слов в тексте и вовсю применяю.

Свойство text-wrap: balance; помогает браузеру более «умно» расставлять переносы и избегать некрасивых висячих слов или одиночных предлогов в конце строки.