Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


ArtemPitov

2 086 просмотров

 Поделиться

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

Настройки 

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
 Поделиться

5 комментариев


Рекомендованные комментарии

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

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

Спойлер

<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>

 

 

Ссылка на комментарий
В 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, но скрывает в независимости от длины блока

Ссылка на комментарий

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

 

Спойлер

<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 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.