jmenglis / clamp-js-main

Clamps an HTML element by adding ellipsis to it if the content inside is too long - Originally from both xavi160 & josephschmitt
https://github.com/josephschmitt/Clamp.js/
26 stars 18 forks source link

how to change truncation style ? #3

Closed AZmake closed 5 years ago

AZmake commented 7 years ago

I want to change the code below(line between 255-259)

sty.overflow = 'hidden';
sty.textOverflow = 'ellipsis';
sty.webkitBoxOrient = 'vertical';
sty.display = '-webkit-box';
sty.webkitLineClamp = clampValue;

to this

element.stylesheet.insertRule(
 '.content::after{' +
 'content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;' +
 'background: -webkit-linear-gradient(left, transparent, #fff 55%);' +
 "background: -o-linear-gradient(right, transparent, #fff 55%);" +
 'background: -moz-linear-gradient(right, transparent, #fff 55%);' +
 '+background: linear-gradient(to right, transparent, #fff 55%);}'
 ,0);

but, it't don't work, and the class '.content::after' don't add to the element,

so, is there a method that I can add custom truncation style more easier?

Thanks a lot for your help!