Как сократить текст и подставить "Читать дальше" на 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 например.

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

Богдан

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

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

11 комментариев к “Как сократить текст и подставить "Читать дальше" на 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() );
      });