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

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

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

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

Установка

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

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (8)
Макс 2016-01-22 в 19:48 / МатериалСпам
Подскажите, как сделать чтобы текст был не в одну строчку?
0
Den 2016-01-03 в 10:37 / МатериалСпам
В нем bb коды не работают(((
0
Денис Минов 2015-10-18 в 08:32 / МатериалСпам
Охохох, оффигенный скрипт, заберу :)
Спасибо :3
1
Марк Яковенко 2016-05-01 в 11:18 / МатериалСпам
Нет, можешь вставить код описания материала между тегами.
0
Роман Беляков 2016-05-01 в 03:22 / МатериалСпам
Если я хочу это делать в модуле Новости сайта, то мне нужно каждую новость писать внутри этого кода?
0
Денис Абдуллин 2016-04-30 в 10:43 / Материал
Копируй код из пункта 5, вставляй свой текст туда, указывай свою ширину.
0
Роман Беляков 2016-04-30 в 01:42 / МатериалСпам
Пожалуйста, поясните, как выполнить п.5.
0
Роман Беляков 2016-05-02 в 03:33 / МатериалСпам
Спасибо автору за помощь! Всё отлично работает.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.