search

CezaryDanielNowak / React-dotdotdot

Multiline text ellipsis for react. Demo:
https://nowak.click/react-dotdotdot/
MIT License
401 stars 54 forks source link

Performance optimize option: splitEveryChars #46

Open orloffv opened 5 years ago

orloffv commented 5 years ago

in my case - string of 10,000 characters without spaces(word-break: break-all;) render takes twenty seconds

CezaryDanielNowak commented 5 years ago

Hi, sorry for late reply. What is the functional difference between splitEveryChars true and false?

orloffv commented 5 years ago

roblem is when there are a lot of characters without spaces. the function works very slowly(seconds)

now it is possible to iterate through a few characters

CezaryDanielNowak commented 5 years ago

I see. So maybe let's make it a default behavior and don't introduce splitEveryChars prop at all

orloffv commented 5 years ago

Maybe, but I have this problem only with big texts and without delimiters. My solution has limitations. Clipped text every n characters. The default is not pretty. Only for cases when valid data such

CezaryDanielNowak commented 5 years ago

Did you try css solution?

white-space: pre-wrap;
word-wrap: break-word;

Alternatively maybe it's worth to preprocess text before clamping it with react-dotdotdot?

Like that (this code is just an example, not production ready):

<Dotdotdot>
  <p>{ contents.split(' ').map((val) => val.split(/(.{20})/).filter(Boolean).join(' ') ).join(' ') }</p>
</Dotdotdot>