Обрезать текст Javascript «Показать еще»:

Как обрезать текст есть куча способов.
Логика обрезания такова, что нужно определить размер блока, задать ему нужный размер какой мы хотим.
А в последствии вернуть на свои места. Если конечно денег платят можно и самому все сделать и воткнуть.
Но как помните у нас три копейки, по этому не стоит тратить свои нервы на это.

возьмем мы такой кусок плагина wTextSlicer:

jQuery.fn.wTextSlicer = function(options){
   var options = jQuery.extend({
    height: '200',
    textExpand: 'expand text',
    textHide: 'hide text'
    },options);
   return this.each(function() {
     var a = $(this),
       h = a.outerHeight();
     if ( h > options.height ) {
       a.addClass('slice slice-masked').attr('data-height',h).height(options.height).after('<div class="slice-btn"><span>'+options.textExpand+'</span></div>');
     };
     var bt = $(this).next('.slice-btn').children('span');
     bt.click(function() {
       var ah = parseInt(a.css("height"), 10);
       ah == h ? a.css({'height':options.height}) : a.css({'height':h});
       bt.text(bt.text() == options.textExpand ? options.textHide : options.textExpand);
       a.toggleClass('slice-masked');
     });
   });
};

И накрутим куда надо:

<script>
document.addEventListener('DOMContentLoaded',function(){
   $('.woocommerce .term-description').wTextSlicer({
    height: '120',
    textExpand: 'Читать далее',
    textHide: 'Свернуть'
   });
});
</script>

Прикрутим малость стилей:

<style>
.woocommerce .term-description {
    overflow: hidden;
    position: relative;
    transition: height .2s;

line-height: 1.75;
color: #5c5c5c;
margin-top: 60px;
padding-bottom: 20px;
}
.slice-btn {
    margin: 15px 0 0;
}
.slice-btn span {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    color: #8e44ad;
}
</style>

 

Вам также может понравиться

About the Author: Тупой прогер