Как сделать многоточие css

text-overflow

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

Синтаксис

text-overflow: clip | ellipsis

Значения

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

Браузеры

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

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

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

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

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

Синтаксис

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

  • none : не устанавливает ограничение, подрезания строк не будет.
  • <integer> : устанавливает максимальное количество строк перед подрезанием содержимого, а затем отображает многоточие (&#8230;) в конце последней строки.

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

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

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

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

Но, есть нюанс&#8230;

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

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

Как я могу сделать переполнение текста: многоточие на двух строках?

У меня есть контейнер, в котором текст может расширяться до двух строк, высотой 40 пикселей и размером шрифта 18 пикселей. Когда я делаю:

Тогда пунктирная линия отображается правильно, но срезается на одной линии. Когда я делаю только:

Тогда он правильно показывает 2 строки, но в конце нет ". ". Как мне добиться этого, чтобы он правильно использовал обе строки И заканчивался ". " во второй строке?

4 ответа

Добавьте span в контейнер, который будет содержать текст:

Добавьте этот CSS:

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

Должен работать во всех современных браузерах.

Чистый метод css на основе -webkit-line-clamp:

Просто хочу добавить свои два цента. Ближайшим чистым решением CSS, которое работает, является метод -webkit-line-clamp , но он ограничен браузерами webkit и является остатком старой реализации Flexbox (которая может быть удалена в будущем).

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

Вместо этого я предлагаю использовать текстовое поле с возможностью прокрутки. Я считаю, что это лучшее решение по трем причинам:

  1. Работает во всех основных браузерах
  2. Никаких обходных путей css, хаков или javascript не требуется
  3. Хорошо сообщает пользователю, что текст обрезан, но дает им возможность прокручивать его, если они хотят — плюс, пользователи уже привыкли к вертикальным полосам прокрутки

Вот пример кода для текстового поля:

Если бы мне пришлось выбирать, я бы использовал решение javascript, подобное Succint, которое удаляет слова после определенное количество и добавляет в конце . Это замечательно, если вы используете React, потому что вы можете реализовать весь код, необходимый внутри компонента, как функцию, и если вам нужен исходный текст, у вас все еще есть его как значение свойства.

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

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

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