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

#javascript #html #jquery #css #вёрстка

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

Ответы

Ответ 1

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



div {
  border: 1px solid #000;
  padding: 5px;
  display: block;
  display: -webkit-box;
  max-width: 400px;
  font-size: 20px;
  -webkit-line-clamp: 4; /* количество строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

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



Ответ 2

Кроссбраузерное решение через псевдоселекторы. Требует 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.



Ответ 3

white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
background: #fc0; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
text-overflow: ellipsis; /* Добавляем многоточие */


Если не нужен Цвет фона можно убрать и если нужно это  -o-text-overflow


Ответ 4

В теории думаю можно обернуть каждое слово в span с помощью JS и смотреть по координатам
(getBoundingClientRect или offset в jQuery), не выходит ли оно за границу обертки...
Может есть более простой способ...
А вообще вот статья - https://css-tricks.com/line-clampin/


Ответ 5

Опытным путем, например, установить величину блока в символах

//js
str = $('.my_div').html();
str = str.substr(0,127) + '...';//к примеру, если величина блока 130 символов.
$('.my_div').html(str);


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

VVVVV
   AVAVA

Из плюсов: простота решения, возникает вопрос только в подсчете символов (например,
заполнить блок символами "O" и скопировать их до overflow в какой-нибудь notepad++,
там посмотреть кол-во)