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

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

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

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

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

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

Синтаксис

.module < line-clamp: [none | ]; >

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

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

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

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

.truncate < text-overflow: ellipsis; /* Нужно, чтобы это заработало */ overflow: hidden; white-space: nowrap; >

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

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

.line-clamp

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

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

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

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

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

Рассмотрим два варианта как можно при помощи CSS обрезать длинный однострочный или многострочный текст.

Вариант 1

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

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

Вариант 2

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

display: -webkit-box; -webkit-line-clamp: 2; // количество строк -webkit-box-orient: vertical; overflow: hidden;

Свойство text-overflow

Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.

Для работы свойства текст должен быть обрезан через свойство overflow или свойство overflow-x в значении hidden , auto или scroll . Если задано visible (а так и есть по умолчанию) — text-overflow работать не будет.

Синтаксис

Значения

Значение по умолчанию: clip .

Пример . Вылезающий текст

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

#elem < width: 200px; overflow: visible; border: 1px solid red; >

Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

#elem < width: 200px; overflow: hidden; border: 1px solid red; >

Пример . Значение ellipsis

Сейчас в дополнение к свойству overflow добавим еще и text-overflow в значении ellipsis . Обрезанному тексту добавится троеточие в конец:

#elem < width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; >

Пример . С полосами прокрутки

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

#elem < width: 200px; overflow: auto; text-overflow: ellipsis; border: 1px solid red; >

Пример . Если нет очень длинных слов

Если нет настолько длинных слов, чтобы они вылазили за границу контейнера, то обрезания не произойдет (ничего же не вылазит). Посмотрите следующий пример:

#elem < width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; >

Пример . Текст в одну строку

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap , которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

#elem < width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; >

Пример . Ширина в процентах

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

#elem < width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; >

Смотрите также

• свойства word-break и overflow-wrap ,
  которые позволяют перенести буквы длинного слова на новую строку
• свойство hyphens ,
  которое включает переносы слов по слогам
• свойство overflow ,
  которое обрезает вылезающие за границу блока части

Отображение точек или заполнителей между знаками табуляции

Между знаками табуличек могут быть точки, тире или другие символы-«закладки», которые выстроили данные.

Добавление символов табулика

1. Выберите Макет или Разметка страницы.
2. В диалоговом окке Абзац и выберите вкладки.
3. Добавьте или выберите табулю, а затем выберите параметр символа руководителя в области Руководитель, который вы хотите отобразить.

Теперь вы можете добавить записи, и при нажатии tab появится строка с символами, которые вы выбрали. Данное форматирование будет добавляться в каждую новую строку до тех пор, пока вы не измените заполнитель. Чтобы изменить форматирование таким образом, чтобы не было руководителя, выполните указанные действия и выберите нет в области Руководитель.

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

Добавление символов табулика

1. Перейдите на вкладку Формат >.
2. Выберите вкладку, чтобы добавить символы руководителей.
3. Выберите выравнивание.
4. Выберите параметр символа руководителя в области Руководителя, который вы хотите отобразить.
5. Нажмите кнопку ОК.

Теперь вы можете добавить записи, и при нажатии tab появится строка с символами, которые вы выбрали. Данное форматирование будет добавляться в каждую новую строку до тех пор, пока вы не измените заполнитель. Чтобы изменить форматирование таким образом, чтобы не было руководителя, выполните указанные действия и выберите нет в области Руководитель.

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