Как ограничить длину строки в html

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .

Ограничить длину строки с переносом

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

2 окт 2016 в 5:40

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Задайте положение right:

.center-content

Отслеживать
ответ дан 2 окт 2016 в 5:30
Artem Gorlachev Artem Gorlachev
4,425 8 8 серебряных знаков 17 17 бронзовых знаков

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как ограничить длину текста с помощью css

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

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

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

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

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

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

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

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

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

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

Как лучше ограничить длину строки

В интернет-магазине многие товары имеют длинные названия (по кол-ву символов), в итоге списки с этими товарами (на главной странице, в модулях) имеют не очень привлекательный вид. Самое простое это конечно просто обрезать их с помощью php (тем же substr) и всё будет выглядеть приемлемо. Но дело в том, что эти названия сами по себе являются анкорами к ссылкам на страницы товаров и естественно хотелось бы, чтобы весь текст анкора сохранялся (исходя из сео-потребностей). Как бы вы посоветовали тут поступить? Исключительно средствами css/html обрезать строку(анкор) никак не получиться?

• Google: более длинный анкорный текст даёт больше контекста
• Google: длина URL не влияет на ранжирование
• 8 развенчанных SEO-мифов. Часть I

На сайте с 04.09.2009
26 апреля 2011, 09:45
alex545:
Исключительно средствами css/html обрезать строку(анкор) никак не получиться?

overflow: hidden (с width: N px)

На сайте с 11.05.2009
26 апреля 2011, 10:11

спасибо. как вариант можно, конечно.. но это только для блоков и соответственно придётся ещё возиться с высотой.

На сайте с 07.05.2006
26 апреля 2011, 10:14

alex545:
спасибо. как вариант можно, конечно.. но это только для блоков и соответственно придётся ещё возиться с высотой.

Если возиться, то можно сделать симпатично, например, как в сапе: