Обрезка текста по символам с возможностью развертывания и свертывания

02015-10-1750948Денис Абдуллин

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

Установка

1. Загружаем файлы из архива в папку /js на вашем сайте.

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

Код

3. В то же место подключаем скрипт, который отвечает за настройку:

Код

Разбираем что все это значит:

length: 150 - количество символов для отображения.
afterLength: '...' - в кавычках текст который мы будет видеть в конце скрытой части текста.
fullText:true - включение/выключение ссылки для отображения скрытого текста. Использовать значение true или false.
moreText: 'полный текст' - текст ссылки до показа скрытого содержания.
lessText: 'скрыть полный текст' - текст ссылки после показа скрытого содержания.

4. В таблицу стилей добавляем внешний вид ссылок:

Код

.more {
  border-bottom: 1px dashed #6DA3BD;
  color: #6DA3BD;
  cursor: pointer;
  display: inline;
}
.more:hover {
  border-color: #4D7285;
  color: #4D7285;
}

5. И последнее, присваиваем тегу "p" класс pr. Или используем готовый код:

Код

<p class="pr" style="width:600px;text-align:justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Меняем значение width на нужную вам ширину и отображение текста text-align. На этом установка завершена. Если возникли вопросы, задавайте в комментариях.