josephschmitt/Clamp.js

truncationHTML doesn't work

Opened this issue ยท 9 comments

getLastChild looks odd, you should check if elem.lastChild exists before use it:

if (elem.lastChild.children && elem.lastChild.children.length > 0) {

Another conditional has if (!elem.lastChild and then tries to use elem.lastChild

else if (!elem.lastChild || !elem.lastChild.nodeValue || elem.lastChild.nodeValue == '' || elem.lastChild.nodeValue == opt.truncationChar) {
  elem.lastChild.parentNode.removeChild(elem.lastChild);

My usage example:

$clamp(this, {
      clamp: 'auto',
      useNativeClamp: false,
      truncationHTML: '<a href="#">read more</a>'
    });

same problem here any solution?

it works for me with clamp: 4:

$clamp(this.query('.masthead-description'), {
    clamp: 4,
    useNativeClamp: false,
    truncationHTML: '<a class="masthead-more">'+t("Lire la suite")+'</a>'
});

In my eyes the actual issue is that clamp:auto is conceptually broken. It first computes the effectively allowed text rows for the element, and then reduces content until the element's height has decreased.

Since you need to HAVE a fixed height, it will never get smaller, thus remove all characters and finally crash when no characters are left.

I got it working with nested containers. Quick and dirty example:

<div style="height: <your fixed height here>">
  <div clamp style="max-height: 100%">
    Text goes here
  </div>
</div>

$clamp($('div[clamp]'), {clamp: 'auto'})

It works if you disable native clamp like so:

useNativeClamp: false

Has this been fixed yet? It doesn't work for me setting useNativeClamp: false. Any help would be greatly appreciated!

Has this been fixed yet? It doesn't work for me setting useNativeClamp: false. Any help would be greatly appreciated!

Hi I'm from 2019 and it works with useNativeClamp: false

Hello @shavidzet I'm from 2020 ;) and this doesn't work. Any help?

@oneEyedSunday Currently in my daily job I don't need it, but you can post your code example, maybe someone can help you

ok, Ive looked through some other issues in the repo and changing my template from a paragraph to a div, and it works