I can’t figure out how to do the following in jQuery or Vanilla JS.
For the layout below I want to do the following:
- Compress each text block using multi-clamp library to three (3) lines.
- When you click on the “Read more” button or on the block itself, that block of text should “expand” (unclamp) completely.
JavaScript
x
8
1
"use strict";!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.MultiClamp=t.MultiClamp||e()}(this,function(){function a(t){return parseInt(t,10)}function l(t){return(t+"").replace(/[^d.]/g,"")-0}function h(t){return Math.round(100*t)/100}function m(t,e){return"textContent"in t?t.textContent=e:t.innerText=e}function o(t,e){return window.getComputedStyle?window.getComputedStyle(t,null).getPropertyValue(e):t.currentStyle.getAttribute(e.replace(/-(w)/g,function(t,e){return e.toUpperCase()}))}function c(t){var e=o(t,"height");return-1<e.indexOf("px")?l(e):h(l(t.clientHeight)-l(o(t,"padding-top"))-l(o(t,"padding-bottom")))}var t=function(t,e){t&&(this.element=t.length?t[0]:t,this.originalOption=e||{},this.originalElement=this.element.cloneNode(!0),this.preInit(this.originalOption),this.init())};return t.prototype={constructor:t,reload:function(t){if(t){if(t.useOriginalText&&(this.element.innerHTML=this.originalElement.innerHTML),"-webkit-box"===this.element.style.display)for(var e=["display","overflow","WebkitLineClamp","WebkitBoxOrient"],i=0;i<e.length;i++)this.element.style[e[i]]=this.originalElement.style[e[i]];var n={};for(var l in this.originalOption)n[l]=this.originalOption[l];for(var o in t)n[o]=t[o];this.preInit(n)}this.init()},preInit:function(t){if(this.option={ellipsis:"ellipsis"in t?t.ellipsis:"...",clamp:"clamp"in t?t.clamp:3,reverse:"reverse"in t&&!!t.reverse,splitByWords:"splitByWords"in t&&!!t.splitByWords,disableCssClamp:"disableCssClamp"in t&&!!t.disableCssClamp,onClampStart:"onClampStart"in t&&"function"==typeof t.onClampStart?t.onClampStart:function(){},onClampEnd:"onClampEnd"in t&&"function"==typeof t.onClampEnd?t.onClampEnd:function(){}},"lineTextLen"in t&&(this.option.lineTextLen=t.lineTextLen),"auto"===this.option.clamp)this.autoClamp=!0;else{if(this.option.clamp=a(this.option.clamp),isNaN(this.option.clamp)||this.option.clamp<1)throw new Error("Invaild clamp number!");this.autoClamp=!1}this.useCssClamp=!(this.option.disableCssClamp||this.autoClamp||this.option.reverse||this.option.splitByWords||"..."!==this.option.ellipsis||void 0===document.body.style.webkitLineClamp)},init:function(){if(this.useCssClamp){var t={display:"-webkit-box",overflow:"hidden",WebkitLineClamp:this.option.clamp,WebkitBoxOrient:"vertical"};for(var e in t)this.element.style[e]=t[e]}else this.contentText="textContent"in(i=this.element)?i.textContent:i.innerText,this.ellipsis=function(t){if(/^<[wW]+>$/.test(t)){var e=document.createElement("div");return e.innerHTML=t,e.firstElementChild||e.firstChild}return t}(this.option.ellipsis),this.clamp();var i},getSingleLineHeight:function(){var t=o(this.element,"line-height"),i=this;if(-1<t.indexOf("px"))return l(t);if(isNaN(t))return n();var e=o(this.element,"font-size");return-1<e.indexOf("px")?h(l(e)*t):-1<e.indexOf("pt")?h(4*l(e)/3*t):n();function n(){var t=i.element.innerHTML;i.element.innerHTML=".";var e=c(i.element);return i.element.innerHTML=t,e}},clamp:function(){var t,e,i,n,l=this;if(t=this.getSingleLineHeight(),""!==this.contentText&&t){if(this.autoClamp?(i=c(this.element),this.option.clamp=a(i/t),n=this.element.style.height,this.element.style.height="auto"):i=h(t*this.option.clamp),!(e=c(this.element))||!i||e<=i)return this.autoClamp&&(this.element.style.height=n),void p();var o=this.option.onClampStart.call(this,{needClamp:!0});if(void 0===o||o){var s=this.option.splitByWords?this.contentText.match(/w+|W+?/g):this.contentText,r=a(this.option.lineTextLen||Math.min(20,this.contentText.length/this.option.clamp))*this.option.clamp;this.trunkSlice(s,i,r,r,!1),this.autoClamp&&(this.element.style.height=n),this.option.onClampEnd.call(this,{didClamp:!0})}else this.autoClamp&&(this.element.style.height=n),p(!0)}else p();function p(t){t||l.option.onClampStart.call(l,{needClamp:!1}),l.option.onClampEnd.call(l,{didClamp:!1})}},trunkSlice:function(t,e,i,n,l){var o,s=this,r=this.option.reverse?t.slice(t.length-n):t.slice(0,n);if(p(this.option.splitByWords?r.join(""):r),c(this.element)>e)o=l?i:a(i/2)||1,this.trunkSlice(t,e,o,n-o,!0);else{if(1===i&&l)return void(this.option.splitByWords&&/s/.test(r[this.option.reverse?0:r.length-1])?p((this.option.reverse?r.slice(1):r.slice(0,r.length-1)).join(""),!0):p(this.option.splitByWords?r.join(""):r,!0));o=l?a(i/2)||1:i,this.trunkSlice(t,e,o,n+o,!1)}function p(t,e){"object"==typeof s.ellipsis?(m(s.element,t),s.option.reverse?s.element.insertBefore(e?s.ellipsis:s.ellipsis.cloneNode(!0),s.element.firstChild):s.element.appendChild(e?s.ellipsis:s.ellipsis.cloneNode(!0))):s.option.reverse?m(s.element,s.ellipsis+t):m(s.element,t+s.ellipsis)}}},t});2
3
$("#info .descr").each(function(i, obj) {4
new MultiClamp(obj, {5
ellipsis: '...',6
clamp: 37
});8
});JavaScript
1
63
63
1
* {2
margin: 0;3
padding: 0;4
}5
6
.container {7
max-width: 480px;8
margin: 10px auto;9
padding: 0;10
width: 100%;11
}12
13
.container:after,14
.container:before {15
display: table;16
content: " ";17
}18
19
.row {20
margin-bottom: 10px;21
}22
23
.row:after {24
content: '';25
display: block;26
height: 0;27
clear: both;28
}29
30
.col {31
display: inline;32
float: left;33
margin: 0 5px;34
width: 100%;35
max-width: 150px;36
text-align: left;37
}38
39
a {40
color: #000000;41
text-decoration: none;42
}43
44
.wrap {45
position: relative;46
min-height: 100%;47
padding: 10px 10px 10px;48
-webkit-box-sizing: border-box;49
box-sizing: border-box;50
background-color: yellow;51
}52
53
h3 {54
margin-bottom: 10px;55
}56
57
.btn {58
margin-top: 10px;59
background-color: #000000;60
color: #ffffff;61
display: inline-block;62
padding: 5px 10px;63
}JavaScript
1
116
116
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>^2
<div id="info" class="container">3
<div class="row">4
<div class="col">5
<a href="#">6
<div class="wrap">7
<h3>Heading 1</h3>8
<div class="descr">9
Lorem ipsum dolor sit amet<br />10
Morbi hendrerit justo non<br />11
Mauris et ligula efficitur<br />12
Suspendisse eget nulla lobortis<br />13
Proin vel quam ornare, commodo sem<br />14
Suspendisse luctus nisi nec<br />15
Nullam volutpat mi ut metus rutrum<br />16
Fusce vehicula ipsum in mauris<br />17
Suspendisse consequat leo18
</div>19
<div class="btn">20
Read More21
</div>22
</div>23
</a>24
</div>25
<div class="col">26
<a href="#">27
<div class="wrap">28
<h3>Heading 2</h3>29
<div class="descr">30
Lorem ipsum dolor sit amet<br />31
Morbi hendrerit justo non<br />32
Mauris et ligula efficitur<br />33
Suspendisse eget nulla lobortis34
</div>35
<div class="btn">36
Read More37
</div>38
</div>39
</a>40
</div>41
<div class="col">42
<a href="#">43
<div class="wrap">44
<h3>Heading 3</h3>45
<div class="descr">46
Lorem ipsum dolor sit amet<br />47
Morbi hendrerit justo non<br />48
Mauris et ligula efficitur<br />49
Suspendisse eget nulla lobortis<br />50
Proin vel quam ornare, commodo sem<br />51
Suspendisse luctus nisi nec<br />52
Nullam volutpat mi ut metus rutrum<br />53
Fusce vehicula ipsum in mauris54
</div>55
<div class="btn">56
Read More57
</div>58
</div>59
</a>60
</div>61
</div>62
<div class="row">63
<div class="col">64
<a href="#">65
<div class="wrap">66
<h3>Heading 4</h3>67
<div class="descr">68
Lorem ipsum dolor sit amet<br />69
Morbi hendrerit justo non<br />70
Mauris et ligula efficitur<br />71
Suspendisse eget nulla lobortis<br />72
Proin vel quam ornare, commodo sem73
</div>74
<div class="btn">75
Read More76
</div>77
</div>78
</a>79
</div>80
<div class="col">81
<a href="#">82
<div class="wrap">83
<h3>Heading 5</h3>84
<div class="descr">85
Lorem ipsum dolor sit amet<br />86
Morbi hendrerit justo non<br />87
Mauris et ligula efficitur<br />88
Suspendisse eget nulla lobortis<br />89
Proin vel quam ornare, commodo sem<br />90
Suspendisse luctus nisi nec<br />91
Nullam volutpat mi ut metus rutrum<br />92
Fusce vehicula ipsum in mauris93
</div>94
<div class="btn">95
Read More96
</div>97
</div>98
</a>99
</div>100
<div class="col">101
<a href="#">102
<div class="wrap">103
<h3>Heading 6</h3>104
<div class="descr">105
Lorem ipsum dolor sit amet<br />106
Morbi hendrerit justo non<br />107
Mauris et ligula efficitur108
</div>109
<div class="btn">110
Read More111
</div>112
</div>113
</a>114
</div>115
</div>116
</div>So far I’ve only figured out how to compress each block to three lines:
JavaScript
1
7
1
$("#info .descr").each(function(i, obj) {2
new MultiClamp(obj, {3
ellipsis: '...',4
clamp: 35
});6
});7
Advertisement
Answer
You can use the reload(options) method to achieve this.
reload(options)You can change initial options when reloading through the options param, and use the original text to re-clamp when options.useOriginalText set to true. default: { …initOptions, useOriginalText: false }
Try this
JavaScript
1
15
15
1
"use strict";!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.MultiClamp=t.MultiClamp||e()}(this,function(){function a(t){return parseInt(t,10)}function l(t){return(t+"").replace(/[^d.]/g,"")-0}function h(t){return Math.round(100*t)/100}function m(t,e){return"textContent"in t?t.textContent=e:t.innerText=e}function o(t,e){return window.getComputedStyle?window.getComputedStyle(t,null).getPropertyValue(e):t.currentStyle.getAttribute(e.replace(/-(w)/g,function(t,e){return e.toUpperCase()}))}function c(t){var e=o(t,"height");return-1<e.indexOf("px")?l(e):h(l(t.clientHeight)-l(o(t,"padding-top"))-l(o(t,"padding-bottom")))}var t=function(t,e){t&&(this.element=t.length?t[0]:t,this.originalOption=e||{},this.originalElement=this.element.cloneNode(!0),this.preInit(this.originalOption),this.init())};return t.prototype={constructor:t,reload:function(t){if(t){if(t.useOriginalText&&(this.element.innerHTML=this.originalElement.innerHTML),"-webkit-box"===this.element.style.display)for(var e=["display","overflow","WebkitLineClamp","WebkitBoxOrient"],i=0;i<e.length;i++)this.element.style[e[i]]=this.originalElement.style[e[i]];var n={};for(var l in this.originalOption)n[l]=this.originalOption[l];for(var o in t)n[o]=t[o];this.preInit(n)}this.init()},preInit:function(t){if(this.option={ellipsis:"ellipsis"in t?t.ellipsis:"...",clamp:"clamp"in t?t.clamp:3,reverse:"reverse"in t&&!!t.reverse,splitByWords:"splitByWords"in t&&!!t.splitByWords,disableCssClamp:"disableCssClamp"in t&&!!t.disableCssClamp,onClampStart:"onClampStart"in t&&"function"==typeof t.onClampStart?t.onClampStart:function(){},onClampEnd:"onClampEnd"in t&&"function"==typeof t.onClampEnd?t.onClampEnd:function(){}},"lineTextLen"in t&&(this.option.lineTextLen=t.lineTextLen),"auto"===this.option.clamp)this.autoClamp=!0;else{if(this.option.clamp=a(this.option.clamp),isNaN(this.option.clamp)||this.option.clamp<1)throw new Error("Invaild clamp number!");this.autoClamp=!1}this.useCssClamp=!(this.option.disableCssClamp||this.autoClamp||this.option.reverse||this.option.splitByWords||"..."!==this.option.ellipsis||void 0===document.body.style.webkitLineClamp)},init:function(){if(this.useCssClamp){var t={display:"-webkit-box",overflow:"hidden",WebkitLineClamp:this.option.clamp,WebkitBoxOrient:"vertical"};for(var e in t)this.element.style[e]=t[e]}else this.contentText="textContent"in(i=this.element)?i.textContent:i.innerText,this.ellipsis=function(t){if(/^<[wW]+>$/.test(t)){var e=document.createElement("div");return e.innerHTML=t,e.firstElementChild||e.firstChild}return t}(this.option.ellipsis),this.clamp();var i},getSingleLineHeight:function(){var t=o(this.element,"line-height"),i=this;if(-1<t.indexOf("px"))return l(t);if(isNaN(t))return n();var e=o(this.element,"font-size");return-1<e.indexOf("px")?h(l(e)*t):-1<e.indexOf("pt")?h(4*l(e)/3*t):n();function n(){var t=i.element.innerHTML;i.element.innerHTML=".";var e=c(i.element);return i.element.innerHTML=t,e}},clamp:function(){var t,e,i,n,l=this;if(t=this.getSingleLineHeight(),""!==this.contentText&&t){if(this.autoClamp?(i=c(this.element),this.option.clamp=a(i/t),n=this.element.style.height,this.element.style.height="auto"):i=h(t*this.option.clamp),!(e=c(this.element))||!i||e<=i)return this.autoClamp&&(this.element.style.height=n),void p();var o=this.option.onClampStart.call(this,{needClamp:!0});if(void 0===o||o){var s=this.option.splitByWords?this.contentText.match(/w+|W+?/g):this.contentText,r=a(this.option.lineTextLen||Math.min(20,this.contentText.length/this.option.clamp))*this.option.clamp;this.trunkSlice(s,i,r,r,!1),this.autoClamp&&(this.element.style.height=n),this.option.onClampEnd.call(this,{didClamp:!0})}else this.autoClamp&&(this.element.style.height=n),p(!0)}else p();function p(t){t||l.option.onClampStart.call(l,{needClamp:!1}),l.option.onClampEnd.call(l,{didClamp:!1})}},trunkSlice:function(t,e,i,n,l){var o,s=this,r=this.option.reverse?t.slice(t.length-n):t.slice(0,n);if(p(this.option.splitByWords?r.join(""):r),c(this.element)>e)o=l?i:a(i/2)||1,this.trunkSlice(t,e,o,n-o,!0);else{if(1===i&&l)return void(this.option.splitByWords&&/s/.test(r[this.option.reverse?0:r.length-1])?p((this.option.reverse?r.slice(1):r.slice(0,r.length-1)).join(""),!0):p(this.option.splitByWords?r.join(""):r,!0));o=l?a(i/2)||1:i,this.trunkSlice(t,e,o,n+o,!1)}function p(t,e){"object"==typeof s.ellipsis?(m(s.element,t),s.option.reverse?s.element.insertBefore(e?s.ellipsis:s.ellipsis.cloneNode(!0),s.element.firstChild):s.element.appendChild(e?s.ellipsis:s.ellipsis.cloneNode(!0))):s.option.reverse?m(s.element,s.ellipsis+t):m(s.element,t+s.ellipsis)}}},t});2
3
document.querySelectorAll("#info .descr").forEach(el => {4
let instance = new MultiClamp(el, {5
ellipsis: '...',6
clamp: 37
});8
9
let a = el.closest('a');10
a.addEventListener('click', e => {11
e.preventDefault();12
instance.reload({clamp: 40000});13
a.querySelector('.btn').style.display = 'none';14
}, { once: true })15
})JavaScript
1
63
63
1
* {2
margin: 0;3
padding: 0;4
}5
6
.container {7
max-width: 480px;8
margin: 10px auto;9
padding: 0;10
width: 100%;11
}12
13
.container:after,14
.container:before {15
display: table;16
content: " ";17
}18
19
.row {20
margin-bottom: 10px;21
}22
23
.row:after {24
content: '';25
display: block;26
height: 0;27
clear: both;28
}29
30
.col {31
display: inline;32
float: left;33
margin: 0 5px;34
width: 100%;35
max-width: 150px;36
text-align: left;37
}38
39
a {40
color: #000000;41
text-decoration: none;42
}43
44
.wrap {45
position: relative;46
min-height: 100%;47
padding: 10px 10px 10px;48
-webkit-box-sizing: border-box;49
box-sizing: border-box;50
background-color: yellow;51
}52
53
h3 {54
margin-bottom: 10px;55
}56
57
.btn {58
margin-top: 10px;59
background-color: #000000;60
color: #ffffff;61
display: inline-block;62
padding: 5px 10px;63
}JavaScript
1
87
87
1
<div id="info" class="container">2
<div class="row">3
<div class="col">4
<a href="#">5
<div class="wrap">6
<h3>Heading 1</h3>7
<div class="descr">8
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus9
rutrum<br /> Fusce vehicula ipsum in mauris<br /> Suspendisse consequat leo10
</div>11
<div class="btn">12
Read More13
</div>14
</div>15
</a>16
</div>17
<div class="col">18
<a href="#">19
<div class="wrap">20
<h3>Heading 2</h3>21
<div class="descr">22
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis23
</div>24
<div class="btn">25
Read More26
</div>27
</div>28
</a>29
</div>30
<div class="col">31
<a href="#">32
<div class="wrap">33
<h3>Heading 3</h3>34
<div class="descr">35
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus36
rutrum<br /> Fusce vehicula ipsum in mauris37
</div>38
<div class="btn">39
Read More40
</div>41
</div>42
</a>43
</div>44
</div>45
<div class="row">46
<div class="col">47
<a href="#">48
<div class="wrap">49
<h3>Heading 4</h3>50
<div class="descr">51
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem52
</div>53
<div class="btn">54
Read More55
</div>56
</div>57
</a>58
</div>59
<div class="col">60
<a href="#">61
<div class="wrap">62
<h3>Heading 5</h3>63
<div class="descr">64
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus65
rutrum<br /> Fusce vehicula ipsum in mauris66
</div>67
<div class="btn">68
Read More69
</div>70
</div>71
</a>72
</div>73
<div class="col">74
<a href="#">75
<div class="wrap">76
<h3>Heading 6</h3>77
<div class="descr">78
Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur79
</div>80
<div class="btn">81
Read More82
</div>83
</div>84
</a>85
</div>86
</div>87
</div>