JSFiddle - React, Tailwind, and code Playground

by sijoma

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit hoc ultimum bonorum, quod nunc a me defenditur; Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. At ego quem huic anteponam non audeo dicere; At iste non dolendi status non vocatur voluptas. Quod quidem nobis non saepe contingit. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Duo Reges: constructio interrete. Que Manilium, ab iisque M. Quae quidem sapientes sequuntur duce natura tamquam videntes;

Re mihi non aeque satisfacit, et quidem locis pluribus. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Re mihi non aeque satisfacit, et quidem locis pluribus. Age nunc isti doceant, vel tu potius quis enim ista melius? Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Ergo id est convenienter naturae vivere, a natura discedere. Cum praesertim illa perdiscere ludus esset.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit hoc ultimum bonorum, quod nunc a me defenditur; Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. At ego quem huic anteponam non audeo dicere; At iste non dolendi status non vocatur voluptas. Quod quidem nobis non saepe contingit. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Duo Reges: constructio interrete. Que Manilium, ab iisque M. Quae quidem sapientes sequuntur duce natura tamquam videntes;

Re mihi non aeque satisfacit, et quidem locis pluribus. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Re mihi non aeque satisfacit, et quidem locis pluribus. Age nunc isti doceant, vel tu potius quis enim ista melius? Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Ergo id est convenienter naturae vivere, a natura discedere. Cum...

CSS

p{
width:300px;
 margin:8px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

p:nth-child(1){
 font-size:16px;
 line-height:20px;
}
p:nth-child(2){
 font-size:30px;
 line-height:38px;
}
p:nth-child(3){
 font-size:12px;
 line-height:16px;
}
p:nth-child(4){
 font-size:25px;
 line-height:30px;
    font-family:arial;
}
p:nth-child(5){
 font-size:50px;
 line-height:60px;
    font-family:arial;
}

JavaScript

var p=document.getElementsByTagName('p'),pl=p.length;
while(pl--){
 lineheight=parseInt(window.getComputedStyle(p[pl]).getPropertyValue("line-height"));
 var lines=Math.floor(300/lineheight);
 p[pl].style['-webkit-line-clamp']=lines;
}