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

Question

[Олег Машко]

Добрый день! Интересует вопрос как можно обрезать текст, чтобы в конце всегда было троеточие. Вариант с подставлением туда рисунка с градиентным фоном не выход. CSS свойство {text-overflow: ellipsis} тоже не помогает, так как оно работает с одной строчкой, у меня же блок с текстом на 5-6 строк. Посоветуйте по возможности более-менее детальную инфу как это сделать. Спасибо за ответ.

Answer 1

[Ilya Suhodolskiy]

codepen.io/suhodolskiy/pen/qEJQRQ

Comments

[Ilya Suhodolskiy]

Олег Машко: Если у вас блок фиксированной ширины, рассчитайте примерное количество символов и поставьте это значение в var size = ***

[Олег Машко]

Пытаюсь подключить его заключив как положено в тег <скрипт>, но почему-то не работает.

[Ilya Suhodolskiy]

Олег Машко: jQuery подключен?

[Олег Машко]

Илья Суходольский: да, подключен и нормально работает) может я неправильно подключил Ваш скрипт?

[Ilya Suhodolskiy]

Олег Машко: Если есть возможность то дайте ссылку на сайт где вы подключаете. Если же jquery подключен , то проверьте название класса у блока в котором нужно сократить текст.

[Ilya Suhodolskiy]

Олег Машко: Не увидел где вы подключили, но я проверил через консоль. Вам нужно добавить каждой новости какой-то общий класс каждой новости, например class="short-news" .

var newsContent= $('.short-news p')
// ....

[Олег Машко]

Илья Суходольский: уже понял, в чем была проблема))) Нужно было скрипт подключать не в head, а непосредственно после текста, и оно сразу заработало) Спасибо Вам большое, легкий и эффективный способ! Вы мне очень помогли!)

Answer 2

[Максим Гречушников]

JS не нужен совсем
yapro.ru/web-master/css/obrezanie-s-mnogotochiem.html

Comments

[Максим Гречушников]

p {
white-space: nowrap;
width: 100%;
overflow: hidden; /* "overflow" value must be different from "visible" */

text-overflow: ellipsis;
}

[Олег Машко]

Максим Гречушников: я писал в теме, что данный стиль подходит лишь для 1й строки.

Answer 3

[torum]

// Формируем анонс
      // Переменная $numchar содержит примерное
      // количество символов в анонсе
      $pos = strpos(substr($news['body'],$numchar), " ");
      // Если новость длинная, то выводим троеточие...
      if(strlen($news['body'])>$numchar) $srttmpend = "...";
      else $strtmpend = "";
      // Выводим анонс
      echo "<p>".substr($news['body'], 0, $numchar+$pos).$srttmpend;
      echo "<br><a href=........Ссылка......=".$news['id'].">подробнее</a></p>";

Answer 4

[Андрей Мохов]

а посмотреть как это сделано на других сайтах? например на youtube - там только 2 строки

.elliosis {
    -webkit-line-clamp: 5;
}

но к сожалению работает только для Chrome, для IE, FF (другие не смотрел) текст просто скрывается и подставляются три точки (в виде картинки или точек - тут уже дело вкуса)

Answer 5

[Sergey]

Вот несколько вариантов обрезать текст в конце.