Jump to content

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

Sign in to follow this  
ArtemPitov

1,035 views

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

Настройки 

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 2
Sign in to follow this  


5 Comments


Recommended Comments

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

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

Спойлер

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

 

 

Share this comment


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

Share this comment


Link to comment

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

 

Спойлер

<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

Share this comment


Link to comment

@Wild Очень благодарен за помощь в реализации данного скрипта у себя на сайте, спасибо

Share this comment


Link to comment
Guest
You are posting as a guest. If you have an account, please sign in.
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.