Как сократить текст и подставить "Читать дальше" на jQuery?

Здравствуй, дорогой читатель!

В сегодняшней заметке хочу поделиться небольшим, но, по-моему скромному мнению, очень полезным кусочком JS кода.

Допустим у вас есть какой-то сайт, на котором есть блок с отзывами, в котором каждый отзыв обернут в div-блок с классом text_review. При этом все отзывы явно больше 500 символов (или меньше) и вообще разной длины, содержат дополнительные блоки с информацией, фотографией и т.д.

Например:

<div class="text_review">
 <img src="petya.jpg" /><br />В первую очередь спасибо тебе Вася, за чудесный тренинг. Я научился...
 <p>(Петя, Москва, 21 год)</p>
</div>
<div class="text_review">
 <img src="lera.png" /><br />Ребята, я так рада, что нашла вашу школу! Если бы не вы, то я...
 <p>(Лера, Киров, 23 года)</p>
</div>

Вам хотелось бы как-нибудь организовать это дело и привести отзывы в порядок? Чтобы они были одной длины, но при этом не просто обрезаны как попало, а чтобы при желании можно было кликнуть по ссылочке "читать дальше >" и прочитать развернутый отзыв на месте.

Вот как раз и оно...

Автоматически сократить текст и подставить "читать дальше" на jQuery:

jQuery(".text_review").each(function(){
	var review_full = jQuery(this).html();
	var review = review_full;

	if( review.length > 500 )
	{
		review = review.substring(0, 500);
		jQuery(this).html( review + '<div class="read_more"> читать полностью &rarr;</div>' );
	}
	jQuery(this).append('<div class="full_text" style="display: none;">' + review_full + '</div>');
});

jQuery(".read_more").click(function(){
	jQuery(this).parent().html( jQuery(this).parent().find(".full_text").html() );
});

P.S. Единственное, что вам нужно указать. Это либо для ваших блоков с отзывами указать класс text_review, либо в селекторе в коде выше указать свой класс. Также по желанию, можете уменьшить и ограничение по количеству символов с 500-та до 200 например.

Желаю вам счастья от души 😉

Богдан

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

20 комментариев к “Как сократить текст и подставить "Читать дальше" на jQuery?”

  1. Егор 15.11.2014 в 01:05 #

    Спасибо большое помогло. Но подскажите пожалуйста как сделать что бы в конце урезанного текста появлялись троеточие?

    • Богдан 02.12.2014 в 15:23 #

      Рад, что вам помогло это решение Егор.

      Чтобы в конце урезанного текста появлялось троеточие, вам нужно 8 строчку из решения выше заменить с такого варианта:

      jQuery(this).html( review + '&lt;div class=&quot;read_more&quot;&gt; читать полностью &amp;rarr;&lt;/div&gt;' );

      На такой:

      jQuery(this).html( review + '...&lt;div class=&quot;read_more&quot;&gt; читать полностью &amp;rarr;&lt;/div&gt;' );

      То есть добавить нужное вам троеточие.

  2. Данияр 21.06.2015 в 14:57 #

    Всё получилось, только почему-то когда жму "читать полностью", открывает вкладку не того ID, что нужно.

  3. Данила 29.11.2015 в 21:53 #

    Эта статья входит в число хороших статей. только одна праблемка у меня, как сделать что бы в конце урезанного текста "Читать дальше" появлялись в одной строке?

    • Богдан 01.12.2015 в 09:06 #

      Рад что вам пригодилась эта статья, Данила. Чтобы текст "читать дальше" появлялся в одной строке с обрезанным текстом, вам нужно сделать следующее.

      Замените в коде из статьи эту строку:

      jQuery(this).html( review + '<div class="read_more"> читать полностью &rarr;</div>' );
      

      на вот эту:

      jQuery(this).html( review + '<span class="read_more"> читать полностью &rarr;</span>' );
      
  4. Олег 08.09.2016 в 16:25 #

    Спасибо большое Вам, отличный материал, особенно для новичков!
    Успехов Вам!

  5. В 14.10.2016 в 09:31 #

    Не получается вставить в кнопку одну строку с обрезанным текстом, там же p блочный элемент, как все таки можно в одну строку поставить?

  6. Верстка 14.10.2016 в 09:31 #

    Не получается вставить в кнопку одну строку с обрезанным текстом, там же p блочный элемент, как все таки можно в одну строку поставить?

  7. Верстка 14.10.2016 в 09:32 #

    Богдан а как можно сделать открыл, потом нажал на это же кнопку текст опять обрезался?

  8. Sergey 29.10.2016 в 21:02 #

    Спасибо за код, только вот мучаюсь уже пару дней над решением одной задачи. Пытаюсь запустить Ваш скрипт, у подгруженных ajax'ом элементах и никак. Догадываюсь что дело кроется в .on. Подскажите пожалуйста решение этой задачи, если это возможно. Спасибо.

    • Богдан 31.10.2016 в 10:08 #

      Вам нужно вот такое использование .on вместо click :

      jQuery("body").on( "click", "div.read_more", function(){
          jQuery(this).parent().html( jQuery(this).parent().find(".full_text").html() );
      });
      
      • Erni21 21.02.2018 в 22:19 #

        Спасибо! Долго искал подобное! Прекрасная работа! Возможно ли еще добавить условие, чтобы обрезал еще и до пробела, то есть допустим 500 символов , но если слово не закончилось, добрать до пробела? Спасибо!

  9. Макс 14.02.2018 в 18:56 #

    здравствуйте, все пытаюсь и никак, подскажите как этот код применить к коментариям в wordpress или может плагин какой-то посоветовали бы ?
    спасибо

  10. Erni21 21.02.2018 в 22:39 #

    И еще вопрос , возможно ли добавить кнопку скрыть?

  11. Lyubava 05.03.2018 в 20:11 #

    Здравствуйте

    Как внизу сделать скрыть, то что развернулось.
    Спасибо за помощь

    • Яна 11.09.2019 в 14:59 #

      Можно подробнее пожалуйста???

  12. Андрей 20.06.2018 в 03:13 #

    Зачет!! Два часа искал, чего только не подключал, а тут практически с первого раза завелось!!))

  13. Ольга 15.12.2018 в 18:31 #

    Богдан, добрый вечер. Может мне поможете. Я создала сайт на WP для продвижения своего сына. Публикую его статьи. И что-то неверно настроила. У меня при нажатии на "Читать дальше" текс не раскрывается полностью. Что делать?

  14. Саня 17.02.2019 в 17:37 #

    Спасибо! Быстро, понятно, вкусно ^^

  15. luksiko 05.07.2019 в 11:39 #

    Тут еще ведется обсуждение?

    А как сделать кнопку возвращения назад, то есть свернуть открытый полный текст?