Многоточие несколько строк css

Усечение многострочного текста с помощью CSS

Для обрезания мы будем использовать только CSS. Это стало немного легче, так как Firefox (начиная с версии 68) начал поддерживать свойство -webkit-line-clamp . Но есть другой способ, который мы сегодня и рассмотрим.

Для измерения используем line-height

Допустим, что для элемента задан межстрочный интервал в 1.4rem . При этом нужно убедиться, что в нем выводятся не более трех строк текста. Для этого установите max-height со значением 1.4rem * 3 .

Затем объявим переменную, и используем ее, чтобы установить общий межстрочный интервал (свойство line-height ).

Установите максимальную высоту

Усечение текста осуществляется следующим образом.

Добавляем многоточие

Многоточие (. ) означает, что весь текст не поместился в заданном блоке. Использовать многоточие считается хорошей практикой при усечении длинного текста. Иначе контент оборвется неожиданно и неуклюже.

Если задать элементу свойство position: relative , многоточие можно будет расположить в правом нижнем углу.

Я установил многоточие вверху с помощью следующей строки кода: top: calc(var(—lh) * (var(—max-lines) — 1)) . Если текст слишком короткий, свойство overflow: hidden его обрежет.

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

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

Если текст слишком короткий, убираем многоточие

Если длина текста равна значению —max-lines или меньше, его нужно скрыть. Для этого нужно создать маленький блок с таким же цветом, что и фон. Затем установить его поверх многоточия, тем самым спрятав его. Это можно сделать следующим образом:

Здесь мы не используем свойство bottom. Благодаря этому блок окажется внизу контента, а не внизу относительного родительского элемента.

Сделаем блоки красными, чтобы они стали более заметными.

Верхний пример содержит больше трех строк, поэтому мы видим многоточие. Во втором примере только две строки, поэтому красный многоточие будет скрыто. Последний пример демонстрирует, что этот способ работает, даже если контент в точности равен значению —max-lines.

Демо

Здесь я хотел использовать логические свойства CSS. Но если нужна поддержка Internet Explorer, придется использовать свойства bottom и right .

Данные о поддержке браузерами взяты из Caniuse .

Источник

CSS многоточие после нескольких строк

В CSS очень просто обрезать текст в одной строке для некоторой ширины и отобразить многоточие.

text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 300px;

Но все не так просто, если надо обрезать текст после трёх (нескольких) строк. Это можно сделать с помощью javascript, но это будет не самое элегантное решение. Есть другой простой способ – использовать CSS-свойство line-clamp .

CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.

Синтаксис

line-clamp может принимать следующие значения:

• none : не устанавливает ограничение, подрезания строк не будет.
• : устанавливает максимальное количество строк перед подрезанием содержимого, а затем отображает многоточие (…) в конце последней строки.

А как это сделать с text-overflow ?

Для text-overflow действительно есть значение ellipsis для ограничения текста:

Для начала – нормально. Но что, если надо добавить многоточие не в первой строке, а где-нибудь, скажем, в третьей строке текста?

Вот здесь в игру вступает line-clamp . Надо заметить, что для придётся использовать комбинацию из трех свойств:

Но, есть нюанс…

Это неполная поддержка браузерами. Тут используется префикс -webkit- (который, как ни странно, работает во всех основных браузерах, но это не точно).

Как обычно, уточнить поддержку свойства браузерами можно на странице Caniuse.

Если добавить немного Javascript, например, использовать небольшой скрипт Clamp.js, получится расширить этот список, посмотрите:

Источник

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

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

Способ обрезания текста зависит от длины и числа строк.

Однострочный текст

Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.

1. Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap .
2. Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .

Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).

Пример 1. Использование text-overflow

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

Рис. 1. Вид обрезанного однострочного текста

Многострочный текст

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

1. Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
2. Свойство display со значением -webkit-box .
3. Свойство -webkit-box-orient со значением vertical .
4. Свойство overflow со значением hidden , оно скрывает текст за пределами блока.

Заметьте, что в большинстве случаев мы имеем дело не со стандартными стилевыми свойствами, а добавляем к ним префикс -webkit-. При этом все эти свойства с префиксами работают даже в Firefox.

Свойство display: -webkit-box в настоящий момент устарело, при вёрстке сейчас используется display: flex . Аналогично устарело и -webkit-box-orient: vertical , сейчас вместо него применяется flex-direction: column . При этом нельзя просто заменить устаревшие свойства современными, перестанет работать ограничение строк.

Также есть проблема и с высотой блока — при добавлении padding его значение прибавляется к высоте строк, в итоге отображается часть лишней строки. Чтобы этого избежать можно явно задать высоту блока или вложить один блок внутрь другого. В примере 3 свойство padding применяется к , а набор свойств для ограничения текста к

.

Пример 2. Использование -webkit-line-clamp

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

Рис. 2. Вид обрезанного многострочного текста

Обратите внимание, что здесь нам не нужен text-overflow, многоточие добавляется через свойство -webkit-line-clamp.

Использование JavaScript

Если не хочется связываться с устаревшими свойствами, всегда можно воспользоваться JavaScript для решения нашей задачи. Библиотека Clamp.js позволяет выбрать алгоритм работы — с помощью -webkit-line-clamp , в этом случае применяется набор свойств из примера 2 или путём явного обрезания строки (пример 3).

Пример 3. Использование Clamp.js

Обратите внимание на параметр useNativeClamp . По умолчанию его значение равно true , в этом случае к элементу добавляется свойство -webkit-line-clamp . Если же указать значение false , тогда строка обрезается явно. Между этими алгоритмами Clamp.js есть небольшая разница, заметная при изменении размера окна браузера. Использование useNativeClamp:true обрезает строку лишь при необходимости, когда она превышает три строки. useNativeClamp:false обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.

Источник

text-overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘ … ‘), or display a custom string.

Try it

The text-overflow property doesn’t force an overflow to occur. To make text overflow its container, you have to set other CSS properties: overflow and white-space . For example:

overflow: hidden; white-space: nowrap; 

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

Syntax

The text-overflow property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

text-overflow: clip; text-overflow: ellipsis ellipsis; text-overflow: ellipsis " [..]"; /* Global values */ text-overflow: inherit; text-overflow: initial; text-overflow: revert; text-overflow: revert-layer; text-overflow: unset; 

Values

The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: »; .

This keyword value will display an ellipsis ( ‘…’ , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.

The to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.

This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

Formal definition

Formal syntax

Источник