Как сделать три точки в css
Перейти к содержимому

Как сделать три точки в css

  • автор:

Как сделать три точки если слишком длинный текст?

Всем привет, установил я мониторинг игровых серверов и есть небольшая проблема. Тут к длинному названию сервера (*serv_top:hostname*) добавляется три точки в конец, чтобы не портить общую картину. А в названии карты (*serv_top:map*) почему-то такого нет и я понять не могу как это сделать) Подскажите пожалуйста

 
-->
/">Сервер отключен
IP: no map /
МЕСТО СВОБОДНО
IP: 127.0.0.1:27015
----- --/--

Скриншот страницы сайта

zHGNAA4oTrqyTbMO-N623A.png

Как видите название карты съезжает, так что хотелось бы добавить параметр, чтобы картам у которых название содержит более 8-10 символов дописывалось 3 точки в конец

  • Вопрос задан более трёх лет назад
  • 6832 просмотра

Многострочный текст под три точки в конце (на css)

Author24 — интернет-сервис помощи студентам

Доброе время суток! Интересует такой вопрос, как сделать текст скажем в 3-5 строк что бы он срезался, и появлялись три точки в конце если последнее слово к примеру не влезло. Может уже есть какие-то простые и элегантные решения на чистом css?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

IsDigit() выводит три точки в конце
Добрый день, подскажите, возможно глупый вопрос, но всё же. Вот такой код имеется. Я подозреваю.

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

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

Как найти отображение, которое переводит три точки в три другие точки
Имеем: -1, \infty, i. Данные точки соответственно переходят в i, 1, 1+i. Необходимо найти.

152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493

Многострочного решения нет насколько я знаю. Есть специальное css свойство которое обрезает однострочный текст.

956 / 518 / 244
Регистрация: 20.05.2015
Сообщений: 774

aj17, можно реализовать, но при использование flex и заданной ширины блока. Вот пример:

1 2 3
p class="test cut"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis nam consectetur dignissimos, illo blanditiis sed eaque rem? Quia perspiciatis animi error, quam ad saepe modi veritatis? Quam, accusantium, commodi? Corporis? /p>
1 2 3 4 5 6 7 8 9 10 11
.test { width: 250px; overflow: hidden; border: 1px solid #a8b3b5; } .cut { display: -webkit-box; -webkit-line-clamp: 3; /* сколько оставить строк */ -webkit-box-orient: vertical; }

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

Имеется некий блок с текстом с фиксированной высотой и шириной, и значением overflow: hidden; , то есть если текст не влазит в область он обрезается, нужно добавить многоточие в конец последней видимо строки. text-overflow работает только для однострочного текста.

Отслеживать
9,634 4 4 золотых знака 35 35 серебряных знаков 73 73 бронзовых знака
задан 6 дек 2016 в 10:53
123 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
Будьте добры, приложите к вопросу Ваши наработки.
6 дек 2016 в 10:57

5 ответов 5

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

Для webkit-браузеров можно использовать такое решение

 
Многоточие (…) — знак препинания в виде нескольких (в русском языке трёх) поставленных рядом точек. Не путать с троеточием. Троеточие (∴) — разделительный знак между словами или предложениями, использовавшийся в древних славянских и грузинских рукописях

Отслеживать
ответ дан 6 дек 2016 в 11:31
Unknown User Unknown User
868 6 6 серебряных знаков 17 17 бронзовых знаков

Кроссбраузерное решение через псевдоселекторы. Требует text-align: justify; и установки для .block-with-text:after такого же цвета как и фона:

/* стили для мноточия '…' */ .block-with-text < /* спрятать текст если у более N строк */ overflow: hidden; /* для установки '…' в абсолютную позицию */ position: relative; /* используйте это значение для расчёта высоты блока */ line-height: 1.2em; /* max-height = line-height (1.2) * число строк (3) */ max-height: 3.6em; /* исправлиление проблемы когда последнее слово не соединяется с правой стороны */ text-align: justify; /* место для многоточия '…' */ padding-right: 1em; >/* создаём многоточие … */ .block-with-text:before < /* многоточие в конце */ content: '…'; /* абсолютное позиционирование */ position: absolute; /* установить позицию в правый нижний угол блока */ right: 0; bottom: 0; >/* спрятать многоточие … если у нас есть текст, который меньше или равен количеству максимальный строк */ .block-with-text:after < content: ""; position: absolute; /* установить позицию в правый нижний угол блока */ right: 0; /* установить width и height */ width: 1em; height: 1em; margin-top: 0.2em; /* цвет фона перед блоком */ background: white; >
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

overflow-wrap

CSS свойство overflow-wrap применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.

Интерактивный пример

Примечание: В отличие от word-break , overflow-wrap создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения

Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap .

Syntax

/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; 

Свойство overflow-wrap задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:

Values

Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).

Чтобы избежать выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.

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

Formal definition

Начальное значение normal
Применяется к не заменяемые строчные элементы
Наследуется да
Обработка значения как указано
Animation type discrete

Formal syntax

overflow-wrap =
normal | (en-US)
break-word | (en-US)
anywhere

Examples

Сравнение overflow-wrap, word-break, и hyphens

Этот пример сравнивает результаты применения overflow-wrap , word-break , и hyphens , когда разбивается длинное слово.

HTML
p> They say the fishing is excellent at Lake em class="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>normalcode>) p> p> They say the fishing is excellent at Lake em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: anywherecode>) p> p> They say the fishing is excellent at Lake em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: break-wordcode>) p> p> They say the fishing is excellent at Lake em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>word-breakcode>) p> p> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, without code>langcode> attribute) p> p lang="en"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, English rules) p> p class="hyphens" lang="de"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, German rules) p> 
CSS
p  width: 13em; margin: 2px; background: gold; > .ow-anywhere  overflow-wrap: anywhere; > .ow-break-word  overflow-wrap: break-word; > .word-break  word-break: break-all; > .hyphens  hyphens: auto; > 

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

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