Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Обрезка текста на JQuery

ArtemPitov

Запись опубликована ·

2 093 перегляди

 Share
Написал маленький плагин для скрытия текста, может кому пригодится.
 

Настройки  

data-length="100" - длина, включая пробелы и html теги | default: 100
data-text_show="Показать еще" - текст кнопки
data-text_hide="Скрыть" - текст кнопки

 

Использование  

<div class="Htext" data-length="250" data-text_show="Показать еще" data-text_hide="Скрыть">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Сам плагин 

 

Спойлер 

(($) => {
    $.fn.extend({ 
        Htext: function() 
        {
        	let default_options = {
        		lenght: 100,
        		text_show: 'Read more &#8594;',
        		text_hide: 'Hide &#8592;'
        	};

            return this.each(function() {
                let $this     = $(this),
                	length    = typeof $this.data('length') != 'undefined' ? $this.data('length') : default_options.lenght,
                	text_show = typeof $this.data('text_show') != 'undefined' ? $this.data('text_show') : default_options.text_show,
                	text_hide = typeof $this.data('text_hide') != 'undefined' ? $this.data('text_hide') : default_options.text_hide;

                	let text = $this.html();

                	if (text.length > length) {
                		let start = text.substring(0, length) + `<span class="htext-dot">...</span>`,
                			end   = 
                			`<span class="htext-more" style="display:none;">` 
                				+ text.substring(length, text.length) + 
                			`</span>
                			<button type="button" class="btn btn-link htext-action htex-show" 
                				data-show="`+ text_show +`" data-hide="`+ text_hide +`">`+ text_show +`</button>`;

                		$this.html(start + end);

                		$this.find('.htext-action').on('click', function () {
                			let $btn = $(this);

                			if ($btn.hasClass('htex-show')) {
                				$this.find('.htext-more').show();
                				$this.find('.htext-dot').hide();
                				$btn.removeClass('htex-show');
                				$btn.addClass('htex-hide');
                				$btn.text($btn.data('hide'));
                			} else {
                				$this.find('.htext-more').hide();
                				$this.find('.htext-dot').show();
                				$btn.removeClass('htex-hide');
                				$btn.addClass('htex-show');
                				$btn.text($btn.data('show'));
                			}
                		});
                	}
            });
        }
    });
    $('.htext').Htext();
})(jQuery);

 

 

  • +1 1
 Share

5 коментарів

Recommended Comments

Wild

Иногда нужно обрезать блок не по символам, а по пикселям.

Использую такое:

Спойлер 

<html>
<head>
    <script src="jquery-2.1.1.min.js"></script>

    <style>
        .h_text {
            max-height: 60px;
            transition: all 0.3s;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="h_text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <a class="expand-collapse" href="#">Показать еще</a>

    <script>
    jQuery(function($) {
        
        var min_h  = 60,                 // максимальная высота свернутого блока
        text_class = '.h_text',          // класс блока с текстом
        more_class = '.expand-collapse'; // класс ссылки показать/скрыть
        
        $(text_class).each(function(indx, el) {
            var cont = $(el),
            max_h    = el.scrollHeight,
            butt     = cont.next(more_class);
    
            if (max_h <= min_h) {
                butt.hide();
            } else {
                butt.on("click", function(event) {
                    var h = cont.height();
                    $(text_class).css('max-height', h < max_h ? max_h : min_h);
                    $(this).text(h < max_h ? "Скрыть" : "Показать еще");
                    return false;
                })
            }
        })
    });
    </script>
</body>
</html>

 

 

Надіслати
Drovocek
В 29.12.2019 в 09:43, Wild сказал:

Иногда нужно обрезать блок не по символам, а по пикселям.

Использую такое: 


<html>
<head>
	<script src="javascript/jquery-2.2.4.min.js"></script>

	<style>
		.htext {
			height:60px;
			transition:all 0.3s;
			-moz-transition:all 0.3s;
			-webkit-transition:all 0.3s;
			-o-transition:all 0.3s;
			overflow:hidden;
		}
	</style>
</head>

<body>
	<div class="htext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<a class="read-next" href="#">Показать еще</a>

	<script>
	jQuery(function($) {
		
		var min = 60;
		
		$(".htext").each(function(indx, el) {
			var cont = $(el),
			max = el.scrollHeight,
			butt = cont.next(".read-next");
    
			if (max <= min) {
				butt.hide();
			} else {
				butt.on("click", function(event) {
				var h = cont.height();
				cont.height(h < max ? max : min);
				$(this).text(h < max ? "Скрыть" : "Показать еще");
				return false;
				})
			}
		})
	});
	</script>
</body>
</html>

 

Попробовал Ваш вариант, но у меня почему-то кнопка показать еще скрыта style="display: none; я так понял должно скрывать если длина блока меньше 60px, но скрывает в независимости от длины блока

Надіслати
Wild

Слегка "облагороженный" модуль.
Исправлены мелкие проблемы.

 

Спойлер 

<html>
<head>
	<script src="jquery-2.1.1.min.js"></script>

	<style>
		.h_text {
			max-height: 60px; // максимальная высота свернутого блока
			transition: all 0.3s;
			-moz-transition: all 0.3s;
			-webkit-transition: all 0.3s;
			-o-transition: all 0.3s;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div class="h_text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<a class="expand-collapse" href="#">Показать еще</a>

	<script>
	jQuery(function($) {
		
		var min_h  = 60,                 // максимальная высота свернутого блока
		text_class = '.h_text',          // класс блока с текстом
		more_class = '.expand-collapse'; // класс ссылки показать/скрыть
		
		$(text_class).each(function(indx, el) {
			var cont = $(el),
			max_h    = el.scrollHeight,
			butt     = cont.next(more_class);
    
			if (max_h <= min_h) {
				butt.hide();
			} else {
				butt.on("click", function(event) {
					var h = cont.height();
					$(text_class).css('max-height', h < max_h ? max_h : min_h);
					$(this).text(h < max_h ? "Скрыть" : "Показать еще");
					return false;
				})
			}
		})
	});
	</script>
</body>
</html>

 

 

 

  • +1 1
Надіслати

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду