Html ограничить длину строки

При разработке сайтов нередки случаи, когда требуется ограничивать длину текста Например, если вы используете дивовую верстку с float: left, в которой высота каждого дива должна быть одинаковой.

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

С помощью стилей мы можем задать любому тексту определенную высоту, зайдя за которую, текст как бы обрезается и общая высота остается одинаковой для всех элементов. Рассмотрим два css метода реализации:

1. Ограничить высоту блока с текстом

Этот метод кроссбраузерный и его часто используют для принудительной обрезки высоты текста. Рассмотрим пример:

С помощью overflow: hidden; обрезается все, что превышает высоту дива в height: 31px; За счет font-size и line-height вы можете регулировать междустрочный интервал и размер шрифта, чтобы в данный див влезало, к примеру ровно две строки.

2. Ограничиваем длину текста с помощью text-overflow

Это дасточно новый метод, который я использую недавно. Он позволяет ограничивать высоту текста по строкам. Рассмотрим пример (только стиль):

Здесь задан класс .zagolovok, который мы можем назначить на любой тег. В итоге, если текст будет больше двух строк, то он автоматически обрежется, а после него пропишется знак многоточия. Количество строк задается с помощью line-clamp. Заметьте, здесь нам не приходится использовать height для принудительного обрезания по высоте.

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

В шаблонах WordPress как и в других CMS для формирования элементов оформления используются динамические данные. К примеру в заголовке списка комментариев может применяться название самой статьи к которой эти комментарии относятся:

Такое оформление замечательно работает пока текст (в нашем примере это название статьи) короткий и не превышает длину строки отведенную для оформления заголовка комментариев. А если название статьи длинное, то результат будет выглядеть примерно следующим образом:

То есть длинное название будет выводиться в две и более строк.
Возникает резонный вопрос, как же обрезать текст так, чтобы он помещался в одну строку? Я предлагаю использовать небольшой код на CSS, если вас как и меня не устраивает то, что теперь надпись отображается в две строки.

Как обрезать отображаемую длину строки на CSS

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

Здесь white-space со значением nowrap отменяет перенос строки, overflow со значением hidden скрывает лишнее, а text-overflow со значением ellipsis вставляет троеточие в конце. Последний стиль я использовал для красоты оформления и он не является обязательным для решения нашей задачи.
Результат работы примера стилей ограничения длины строки описанного выше:

Как видите все замечательно работает. Длинный текст обрезается и теперь умещается в одну строку.
Следует учесть, что указанные выше пример кода стилей корректно отображается только в браузерах поддерживающих стандарты CSS3 и HTML5. Впрочем на момент написание этой статьи все современные браузеры удовлетворяют этим условиям.

Благодарности

При написании статьи были использованы следующие источники:

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

Для этого есть простое решение на CSS. Использование свойства text-overflow: ellipsis , которое позволяет обрезать строку с длинным тестом. Для того чтобы данное решение сработало необходимо указать ширину родительского блока, и иметь свойство overflow равное hidden или clip.

Решение для однострочного текста:

Решение для многострочного текста:

Но вот для обрезки многострочного текста на CSS придется прибегнуть к помощи псевдо-элементов :before и :after.


[an error occurred while processing the directive]
Карта сайта