jackyr / react-multi-clamp

Simple, efficient and easy-to-use multiline text clamp react component. (supports reverse clamp)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

the react-multi-clamp@2.0.1 donot work when ellipsis is a reactelement

heizhishi opened this issue · comments

in your example:code 50line

<MultiClamp 
          clamp={2} 
          ellipsis={<a style={{ color: 'blue', marginLeft: '5px', cursor: 'pointer' }} onClick={this.handleClick}>more>></a>} 
          splitByWords 
          ref={ref => this.instance2 = ref}>
          {text1}
</MultiClamp>

when you change the clamp from 2 to 10 , then the bug come here
image

thank your for you work at last.

i find the reason.in your multi-clamp.js(method:doNotNeedToClamp donot hide the ellipsis when ellipsis is a reactdom ).i suggest modify the mothod like that


      function doNotNeedToClamp(isForcePrevent) {
        
        if (!isForcePrevent) self.option.onClampStart.call(self, {
          needClamp: false
        });
        self.option.onClampEnd.call(self, {
          didClamp: false
        });
         
        self.element.appendChild(self.ellipsis );
        self.element.removeChild(self.ellipsis )
      }
    },

thank you

@heizhishi Thanks a lot. It's definitely a bug of react-multi-clamp, but not multi-clamp.
I won't modify multi-clamp.js in case of unexpected trouble. This bug now fixed in react-multi-clamp@2.0.2.

@jackyr oh, it would be better to remove ellipsis in your plan.I will close the issue. thank you.