Как обрезать текст css
Перейти к содержимому

Как обрезать текст css

  • автор:

Обрезка текста в CSS

введите сюда описание изображения

Необходимо обрезать текст многоточием как на картинке. Количество символов и предложений произвольное. CSS свойство text-overflow: ellipsis; работает только в однострочном режиме.

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

Отслеживать
задан 16 окт 2017 в 8:20
703 2 2 золотых знака 6 6 серебряных знаков 15 15 бронзовых знаков
Каким образом будет задаваться количество слов, после которых надо обрезать?
16 окт 2017 в 8:54
@StepanKasyanenko сколько влезет в блок, видимо
16 окт 2017 в 8:54

@andreymal ну там возможны варианты, не хотелось бы заниматься телепатией)) Хотя я тоже так предпологаю.

16 окт 2017 в 8:55
Английский SO предлагает юзать некрасивые костыли
16 окт 2017 в 8:58

@DaemonHK не понимаю, что вы несёте. Если текст влезает в пять строк, многоточие не нужно. Если текст не влезает в пять строк, многоточие нужно. Влезает текст или нет, знает только браузер. Всё просто.

16 окт 2017 в 9:51

2 ответа 2

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

Возможность сделать такое используя только css есть только у вебкитов и 12й оперы:

p < width: 20em; overflow: hidden; background: antiquewhite; >.webkit < display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; >.opera < line-height: 1.1; height: 3.4em; /* при 3.3 почему-то остаётся 2 строки вместо 3 */ text-overflow: -o-ellipsis-lastline; /* не работает с -webkit-box */ >.both < line-height: 1.1; height: 3.4em; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; >@supports (text-overflow: -o-ellipsis-lastline) < .both < display: block; >>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

text-overflow

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

Синтаксис

text-overflow: clip | ellipsis

Значения

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

HTML5 CSS3 IE Cr Op Sa Fx

    text-overflow    

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

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

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

Браузеры

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

CSS Обрезка текста с многоточием

Как обрезать длинный текст и поставить многоточие в конце?

Чтобы обрезать текст необходимо воспользоваться комбинацией из трех свойств:

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

Но данный способ обрезает текст только на первой строке, для обрезки в любой необходимой строке воспользуемся следующими свойствами:

display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

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

26 ноября 2022

Читайте также
  • Бордер с градиентом
  • Бургер меню на html и css
  • Всплывающая подсказка
  • Как сделать обводку текста в CSS
  • Подчеркивание ссылок при наведении

Как обрезать текст css

Как использовать CSS-свойство line-clamp для обрезки многострочного текста на веб-страницах

Главная СтатьиКак обрезать многострочный текст в CSS
Поделиться в соцсетях:

Наверняка в процессе разработке внешнего интерфейса порой возникает необходимость обрезать текст, представляемый пользователю. Причин для этого предостаточно: сохранение драгоценного места на экране, одинаковый внешний вид рядом расположенных блоков секции, отображение части информации с переключателем «show more» и т.д.

Большинство разработчиков знают, как реализовать обрезку текста для одной строки. Для этого требуется заданная ширина и использование сочетания правил overflow: hidden , white-space: nowrap и text-overflow: ellipsis . Все это вместе заставит текст обрезаться до одной строки и добавит многоточие в конце текста.

Однако это все валидно для случая обрезки именно до одной строки. В некоторых сценариях для пользовательского интерфейса полезно обрезать текст после нескольких строк. Как, к примеру, реализовать обрезку текста в этих блоках до трех строк?

Способы обрезки нескольких строк

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

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

Размещение текста внутри блока с заданной высотой — это уже CSS решение. Однако проблема связана со свойствами шрифта и межстрочного интервала, что также делает его крайне негибким.

Свойство line-clamp

Для решения вышеописанных проблем в WebKit было добавлено правило CSS -webkit-line-clamp . Оно принимает целочисленное значение и ограничивает содержимое используемого элемента указанным количеством строк. Требования для обрезки этим способом заключаются в том, что среди свойств элемента должно быть свойство display со значением либо -webkit-box , либо -webkit-inline-box , а также свойство -webkit-box-orient: vertical . Все это будет выглядеть примерно следующим образом:

.content

Что происходит, так это то, что CSS отобразит весь контент, но ограничит его после указанного количества строк (в данном случае 3). В конце третей строки будет добавлено многоточие. Также, нужно добавить свойство overflow: hidden для скрытия остальных строк.

Теперь в нашем примере все элементы едины и всегда обрезаются до одинакового количества строк.

Поддержка браузерами этих удобных правил CSS всегда была одним из их самых больших недостатков и поэтому свойство пока пишется с префиксом. Тем не менее line-clamp является частью модуля CSS Overflow уровня 3, который может обеспечить более широкую поддержку в будущем.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *