jmenglis / clamp-js-main Goto Github PK

In Chrome, the text looks correct... i.e no ellipsis on the 2nd line of text, as the text is not wrapping to a 3rd line...
http://pasteboard.co/ArBHmdnam.jpg

But in IE/Firefox, even though the 2nd line is nowhere near wrapping, it still shows an ellipsis.
http://pasteboard.co/3DXHJQgQp.jpg

I am using

$('.clamp').each(function (i, obj) { $clamp(obj, { clamp: 2, useNativeClamp: false, truncationChar: '...' }); });

Note : I had to set useNativeClamp to false to prevent another issue in Safari, which added a ... in the middle of the sentence.

I'm having an issue with clamping in IE to 2 lines only.
Have the same function with 3 line, and it works perfectly, and it clamps the full component to ellipsis if $clamp(element, { clamp: 2});

Would appreciate any suggestions

I just want to make sure that I'm using the most recent version of this library. It looks like 0.11.5 is the latest version, but the comment at the top of https://github.com/jmenglis/clamp-js-main/blob/master/clamp.js says 0.11.4. Is the version just wrong in the comment, or is that file actually an older version?

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!

Please try this codepen example with Firefox
https://codepen.io/haoruiqian/pen/pxROZp

Here is whole content to be clamped.
A Tried Triedd C B Tried to install MS Office 2010 professional. <strong>Asks for Windows</strong> CD which is not available

I set clamp to 2, and it clamped at Asks for Wi then wrapped them into the original html tag <strong>, but the appended ellipsis was included into the html tag.

Project is a little outdated. Want to clean up code with ESNEXT+.

It is just working on Chrome

I've tested only on Version 11.1.2 (13605.3.8)
but seems like this is the same issue as it was in the original library.
josephschmitt/Clamp.js#45

Changing Truncation Characters does not current work in clamp-js.

$clamp(paragraph, {
      clamp: 10,
      useNativeClamp: false,
      animate: true
      truncationChar: '!!!'
});

Version: 0.11.4

Hey mate, it does work but not with display: inline elements. And I can't remove the display: inline what should I do?
.article-card .card-title { padding: 0rem 0.3rem; line-height: 1.56; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 2px; transition: background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

I open the example in chrome (Version 58.0.3029.81) and doesn't show the "<h1>" text.
I tested in my own code and set 'clamp: 3' and some items show 3 lines and other shows 4 (this is in firefox)