Как обрезать текст и развернуть его по клику

Рассмотрим такую задачу – у нас есть текст, нам необходимо скрыть его до определенного символа, а по клику на кнопку подробнее развернуть.

Как развернуть текст по клику

Для начала давайте этот текст подготовим. Рассмотрим пример на PHP. Если у вас текст содержит теги HTML, то давайте их для начала уберем:

<?
// наша строка, которая может содержать в себе HTML теги
$str = "<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quia magni ipsum, consequatur ad ea voluptates minima voluptate soluta iste esse obcaecati aut sapiente dolorum et tempore hic quae autem.</div><div>Praesentium temporibus laborum, saepe tempora alias harum ducimus deleniti totam illum? Harum tenetur doloribus vitae quidem, doloremque laudantium labore iusto atque enim dolore ratione eum eos similique voluptatibus nemo consectetur.</div>";

// убираем HTML теги со строки
$str = strip_tags($str);
?>

Итак, чистый текст у нас находится в переменной $str. Следующие действия:

  •  проверить количество символов в строке
  •  вывести обычный текст если символов окажется меньше чем нужно
  •  оставить необходимое количество символов
  •  убрать лишние символы в конце строки
  •  находим последний пробел и показываем целое слово
  •  считаем сколько теперь занимает строка и из переменной $str берем остальную часть текста
<?
// проверяем длину строки
if (strlen($str) > 180) {
	// записываем в переменную первые 180 символов
	$textPrev = substr($str, 0, 180);
	// смотрим на последние символы строки - текст не должен заканчиваться на символы эти 4 символа
	$textPrev = rtrim($textPrev, "!,.-");
	// находим последний пробел, чтобы строка заканчивалась целым словом
	$textPrev = substr($textPrev, 0, strrpos($textPrev, ' '));
	// записываем в новую переменную строку, которая начинается с последнего символа "текста анонса"
	$textNext = substr($str, strlen($textPrev));
	?>

	<?
} else {
	// выводим целую строку, если ее длина меньше 180 символов
	echo $str;
}
?>

Если на этом этапе вам всё понятно, взглянем теперь на весь код, и добавим немного HTML разметку для наших переменных:

<?
$str = "<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quia magni ipsum, consequatur ad ea voluptates minima voluptate soluta iste esse obcaecati aut sapiente dolorum et tempore hic quae autem.</div><div>Praesentium temporibus laborum, saepe tempora alias harum ducimus deleniti totam illum? Harum tenetur doloribus vitae quidem, doloremque laudantium labore iusto atque enim dolore ratione eum eos similique voluptatibus nemo consectetur.</div>";
$str = strip_tags($str);

if (strlen($str) > 180) {

	$textPrev = substr($str, 0, 180);
	$textPrev = rtrim($textPrev, "!,.-");
	$textPrev = substr($textPrev, 0, strrpos($textPrev, ' '));
	$textNext = substr($str, strlen($textPrev));
	?>

	<div class="review-text">
		<span class="text-prev"><?=$textPrev?></span><span class="text-next"><?=$textNext?></span>
		<a href="#" class="text-more">подробнее</a>
	</div>

	<?
} else {
	?>

	<div class="review-text"><?=$str?></div>

	<?
}
?>

Добавим CSS для части текста, которая будет показываться по клику на “подробнее” – просто скроем его:

.text-next {
	display: none;
}

Ну и нам остается добавить показ этого кода по клику, воспользуемся jQuery:

<script>
$('.text-more').click(function(){
	// записываем предыдущий элемент
	var $prevText = $(this).prev();
	// добавим эффект, который обычно используется для анимации, но со скоростью 0 это будет незаметно
	$prevText.slideToggle(0);
	// т.к. это ссылка, необходимо сбросить переход по анкору
	return false;
});
</script>

Не забывайте подключать библиотеку jQuery для работы этого кода 🙂

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

2 коментаря

Залишити коментар до Dmitriy Скасувати коментар