1

Есть 4 блока с текстом, блоки отзывов, нужно чтоб если отзыв большой текст обрезался и превращался в ... Использую для этого библиотеку clamp.js, вроде все хорошо, но как обойти все блоки и сделать это с текстом ??

var p3 = $('.rewievs__text').get(0);




$(function(){
  $clamp(p3, {clamp: 6});
	
});










(function(){window.$clamp=function(c,d){function s(a,b){n.getComputedStyle||(n.getComputedStyle=function(a,b){this.el=a;this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;"float"==b&&(b="styleFloat");c.test(b)&&(b=b.replace(c,function(a,b,c){return c.toUpperCase()}));return a.currentStyle&&a.currentStyle[b]?a.currentStyle[b]:null};return this});return n.getComputedStyle(a,null).getPropertyValue(b)}function t(a){a=a||c.clientHeight;var b=u(c);return Math.max(Math.floor(a/b),0)}function x(a){return u(c)*
    a}function u(a){var b=s(a,"line-height");"normal"==b&&(b=1.2*parseInt(s(a,"font-size")));return parseInt(b)}function l(a){if(a.lastChild.children&&0<a.lastChild.children.length)return l(Array.prototype.slice.call(a.children).pop());if(a.lastChild&&a.lastChild.nodeValue&&""!=a.lastChild.nodeValue&&a.lastChild.nodeValue!=b.truncationChar)return a.lastChild;a.lastChild.parentNode.removeChild(a.lastChild);return l(c)}function p(a,d){if(d){var e=a.nodeValue.replace(b.truncationChar,"");f||(h=0<k.length?
    k.shift():"",f=e.split(h));1<f.length?(q=f.pop(),r(a,f.join(h))):f=null;m&&(a.nodeValue=a.nodeValue.replace(b.truncationChar,""),c.innerHTML=a.nodeValue+" "+m.innerHTML+b.truncationChar);if(f){if(c.clientHeight<=d)if(0<=k.length&&""!=h)r(a,f.join(h)+h+q),f=null;else return c.innerHTML}else""==h&&(r(a,""),a=l(c),k=b.splitOnChars.slice(0),h=k[0],q=f=null);if(b.animate)setTimeout(function(){p(a,d)},!0===b.animate?10:b.animate);else return p(a,d)}}function r(a,c){a.nodeValue=c+b.truncationChar}d=d||{};
    var n=window,b={clamp:d.clamp||2,useNativeClamp:"undefined"!=typeof d.useNativeClamp?d.useNativeClamp:!0,splitOnChars:d.splitOnChars||[".","-","\u2013","\u2014"," "],animate:d.animate||!1,truncationChar:d.truncationChar||"\u2026",truncationHTML:d.truncationHTML},e=c.style,y=c.innerHTML,z="undefined"!=typeof c.style.webkitLineClamp,g=b.clamp,v=g.indexOf&&(-1<g.indexOf("px")||-1<g.indexOf("em")),m;b.truncationHTML&&(m=document.createElement("span"),m.innerHTML=b.truncationHTML);var k=b.splitOnChars.slice(0),
        h=k[0],f,q;"auto"==g?g=t():v&&(g=t(parseInt(g)));var w;z&&b.useNativeClamp?(e.overflow="hidden",e.textOverflow="ellipsis",e.webkitBoxOrient="vertical",e.display="-webkit-box",e.webkitLineClamp=g,v&&(e.height=b.clamp+"px")):(e=x(g),e<=c.clientHeight&&(w=p(l(c),e)));return{original:y,clamped:w}}})();
.rewievs {
  display: flex;
  justify-content: center;
  & > * {
    &:not(:last-child) { margin-right: 30px }
  }
}
.rewievs__item {
  width: 25%;
  text-align: center;
  max-width: 300px;
  height: 150px;
  padding: 10px;
  background-color: $white;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2);
}

.rewievs__text {
  font-size: 14px;
  line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rewievs"> 


<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>
</div>

1 ответ 1

1

Вот я вставил это:

// обход всех элементов с селектором ".rewievs__text" 
$( ".rewievs__text" ).each(function() { 
  // вызов плагина для каждого элемента (this)
  $clamp(this, {clamp: 6})
});

И подключил скрипт с CDN, убрав его текст из js (можно было обойтись без этого, но так будет лучше и пример короче):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/clamp.min.js"></script>

$( ".rewievs__text" ).each(function() {
  $clamp(this, {clamp: 6})
});
.rewievs {
  display: flex;
  justify-content: center;
  & > * {
    &:not(:last-child) { margin-right: 30px }
  }
}
.rewievs__item {
  width: 25%;
  text-align: center;
  max-width: 300px;
  height: 150px;
  padding: 10px;
  background-color: $white;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2);
}

.rewievs__text {
  font-size: 14px;
  line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/clamp.min.js"></script>
<div class="rewievs"> 


<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>

<div class="rewievs__item"> 
  <div class="rewievs__text">  В Образовательный центр охраны труда обратилась за переподготовкой по ОТ по рекомендации. Буду тоже всем рекомендовать - интересное и актуальное обучение. Профессиональные преподаватели.</div>
</div>
</div>

3
  • Спасибо бро ! Вопрос закрыт !
    – Евген
    Commented 31 мар. 2019 в 8:33
  • @Евген обращайтесь =) Commented 31 мар. 2019 в 8:48
  • В итоге всем советую не используйте clamp, у него плохая поддержка и будет все ломаться в mozile
    – Евген
    Commented 5 апр. 2019 в 15:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.