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

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

17.10.201522109Markella

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

Установка

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

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

Код
<script type="text/javascript" src="/js/jquery-1.8.min.js"></script>
<script type="text/javascript" src="/js/jquery.liTextLength.js"></script>

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

Код
<script>
$(function(){
  $('.pr').liTextLength({
  length: 150,
  afterLength: '...',
  fullText:true,
  moreText: '<br>полный текст',
  lessText: '<br>скрыть полный текст'
  });
});
</script>

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

  • 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. На этом установка завершена. Если возникли вопросы, задавайте в комментариях.



Сохраните в социальную сеть
Комментарии (9)
Денис Минов 18.10.2015 в 08:32Спам
Охохох, оффигенный скрипт, заберу :)
Спасибо :3
1
Den 03.01.2016 в 10:37Спам
В нем bb коды не работают(((
0
Макс 22.01.2016 в 19:48Спам
Подскажите, как сделать чтобы текст был не в одну строчку?
0
Пожалуйста, поясните, как выполнить п.5.
0
Денис Абдуллин 30.04.2016 в 10:43
Копируй код из пункта 5, вставляй свой текст туда, указывай свою ширину.
0
Если я хочу это делать в модуле Новости сайта, то мне нужно каждую новость писать внутри этого кода?
0
Нет, можешь вставить код описания материала между тегами.
0
Спасибо автору за помощь! Всё отлично работает.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт