xiaody / react-lines-ellipsis Goto Github PK

Hi, i get this error when i use the htmlellipsis component.. As i understand its because of the usage of

Hey does this library also support a 'collapse' functionality? What If I want user to be able to collapse content back after expanding it? If its not available by default, how do you suggest I extend it to add the functionality?

It could be that I'm using the component incorrect. Please correct me if I am.

This is an edge case for sure, but if the string does not contain any spaces it doesn't appear to be clamped.

From the demo

i'm using your package in production and wanted to know why the inner HTML support is Experimental ?

are there any known issues ?
is there a plan to support it non-experimentally ?

thanks.

Hello,

I've come across an interesting bug using this library.

Steps 1 : Add this code
<HTMLEllipsis unsafeHTML='simple html content' maxLine="2" ellipsis="..." basedOn="letters" />

Step 2: Check in a web browser.

Chrome behavior :
For the first time, It trims perfectly and display ... at line number 2. But When you reload the page It shows ... at line number 3.

Firefox and Safari behavior:
It trims at line number 3 instead of line number 2.

Seems like, maxLine attribute doesn't work with even line number value(Ex: 2, 4, 6, 8 so on).

My browser details -

1. Chrome : Version 94.0.4606.61 (Official Build) (x86_64)
2. Safari : Version 14.0.3 (16610.4.3.1.4)
3. Firefox : 92.0.1 (64-bit)

Please have a look into it .

Thank you!

Passing null to Text param when BasedOn param is "letters", throws unhandled exception.

Error in /turbo_modules/[email protected]/lib/index.js (158:30)
Cannot convert undefined or null to object

Here is reproduction:
https://stackblitz.com/edit/react-pfdgmc

im using HTMLEllipsis module from the library since i want to trim an html element, but afer the trim happens there is a white space between the ellipsis and word, im sorry if im doing something wrong here, screenshot is attached for reference

this is the span that causing the extra space between

<span class="LinesEllipsis-unit"> </span>

hi, I want to know how to control more/less button? thank you very much!

你好，请问「查看更多」/「收起」按钮如何设置？ 非常感谢！

"react": "^16.4.0",

Warning: React does not recognize the winWidth prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase winwidth instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Setting the LineEllipses to use basedOn: 'words' has this weird issue of include punctuation ([',', '.']) when it trims.

So when the trim happens, we can have ,... or .... which looks a bit weird.
Is there a way to include a hook when we want certain chars trimmed off as well?

I am using a component that doesn't allow to choose whether to apply this plugin on an element or not.
I wanted to disable this this component for my HTML element. Is there any HTML class that I can use so react-lines-ellipsis would skip this element?

Hi! First of all, great library!

I think a pretty common use case for this library is showing a brief preview of the text and let the user expand the preview to see the full text. In my case, I'm handling the expanded state on my component and either rendering the text itself of the one wrapper by the library, but it would be cool if the library supported this.

For this, I can think of two approaches:

• Adding a maxLines value on the onReflow function, so we can dynamically change between a small number and that one.
• Add a new prop to support this

What do you think? Thanks!

OS: iOS 12.3.1
Broswer: Safari
Library: "preact": "8.2.9", "react-lines-ellipsis": "0.14.1"
Code snippet：

componentDidMount() {
    window.setTimeout(() => {
      this.setState({ isMounted: true });
    }, 0)
}

...

render() {
    return (
      ...
      {isMounted && <LinesEllipsis {...props} />}
      ...
    );
}

The component wouldn't initialize properly sometimes.
In Android and PC broswer it works well.

Generally, window.getComputedStyle(this.target)would get an Object with property width width a certain value like 100px. But sometimes Safari would get a auto value of width in getComputedStyle(this.target), that led to no wrap in canvas and calcIndexes() got the wrong result of [0]. Not always, there's a chance that that would happen.

Could I get react-lines-ellipsis via cdn? I would provide a demo.

Chrome Version:

Result:

Expected Result:

I think this would be neater to write:

<LinesEllipsis>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus dolor at felis varius euismod. Nulla non augue at est consequat fermentum. Integer id scelerisque ipsum. Vestibulum vitae dui augue. Vivamus diam nulla, ultricies quis lacus in, pretium interdum quam. Donec non commodo orci. Nulla imperdiet scelerisque faucibus. Quisque eget metus at arcu dapibus faucibus nec eget est. Curabitur consectetur posuere ante nec mattis. Cras non posuere orci. Maecenas pellentesque massa efficitur egestas posuere. Proin efficitur urna sed turpis tincidunt, a elementum dui semper. Morbi ultricies dignissim scelerisque. Integer dignissim mauris nec arcu vestibulum, nec rhoncus nisi suscipit. Quisque tincidunt scelerisque metus, in sollicitudin metus malesuada tempor.

  In nec lectus iaculis, tristique felis at, faucibus arcu. Aliquam et euismod arcu, non semper sapien. Maecenas lobortis, mi eget hendrerit ullamcorper, lorem purus fermentum orci, non rhoncus risus mauris in odio. Aenean ut nisl purus. Fusce quis ultricies diam, at ullamcorper libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget nibh eros. Aliquam semper porta massa.
</LinesEllipsis> 

than this:

<LinesEllipsis text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus dolor at felis varius euismod. Nulla non augue at est consequat fermentum. Integer id scelerisque ipsum. Vestibulum vitae dui augue. Vivamus diam nulla, ultricies quis lacus in, pretium interdum quam. Donec non commodo orci. Nulla imperdiet scelerisque faucibus. Quisque eget metus at arcu dapibus faucibus nec eget est. Curabitur consectetur posuere ante nec mattis. Cras non posuere orci. Maecenas pellentesque massa efficitur egestas posuere. Proin efficitur urna sed turpis tincidunt, a elementum dui semper. Morbi ultricies dignissim scelerisque. Integer dignissim mauris nec arcu vestibulum, nec rhoncus nisi suscipit. Quisque tincidunt scelerisque metus, in sollicitudin metus malesuada tempor.

In nec lectus iaculis, tristique felis at, faucibus arcu. Aliquam et euismod arcu, non semper sapien. Maecenas lobortis, mi eget hendrerit ullamcorper, lorem purus fermentum orci, non rhoncus risus mauris in odio. Aenean ut nisl purus. Fusce quis ultricies diam, at ullamcorper libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget nibh eros. Aliquam semper porta massa.`} />

I have a situation where I have text for the LinesEllipsis being a number.
This works, until the component is updated, and the reflow method is being called.

The problematic line is this:
https://github.com/xiaody/react-lines-ellipsis/blob/master/src/index.js#L82

When props.text is i.e. 8 (the number not the string), there is no .split method for that.

see:
pic

I'm not quite sure if this is an issue:
https://codesandbox.io/s/826jq3n4w9

Problem is, I can't really make react-lines-ellipsis to work on one line texts to make it stay between the wrapper divs without overflowing. Even if I set the maxLine to 1. If this isn't an issue, please have a look and help me find what I'm missing in my implementation.

Thank you!

renderToString has funny behaviour not really working

In our nextJs app we have a post build prune command (https://docs.npmjs.com/cli/v7/commands/npm-prune) which removes all dev dependencies. This has caused react-lines-ellipsis to cause an error when it imports lodash. Has anyone else come across this? We have lots of other dependencies and they work fine so I suspect it is because you have no 'dependencies' list.

just like this：

Feature request

Hi, I've found that in your example app you attached a window resize event listener оn App component

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      text: defaultText,
      maxLine: 3,
      useEllipsis: true,
      renderId: 1
    }
    this.onTextClick = this.onTextClick.bind(this)
    this.onTextKey = this.onTextKey.bind(this)
    this.onTextEdit = debounce(this.onTextEdit.bind(this), 100)
    this.onChangeLines = debounce(this.onChangeLines.bind(this))
    this.onResize = debounce(this.onResize.bind(this), 150)
  }

  componentDidMount () {
    window.addEventListener('resize', this.onResize)
  }

  componentWillUnmount () {
    window.removeEventListener('resize', this.onResize)
  }

But it's not very convenient way when writing an app.
Could you attach listeners to LinesEllipsis and HTMLEllipsis components itself, so one can use this functionality just out of the box?

Packages like react-text-truncate, shiitake, react-truncate, react-dotdotdot use such an approach and it's very convinient (but unfortunately non of the above can handle HTML 😉).

Thanks in advance.

0.13.2

react-dom.js:512 Warning: React does not recognize the ellipsisHTML prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase ellipsishtml instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I have used react-lines-ellipsis in my project its working fine but its showing following warning in console. Because of its added winWidth property to dom element at run time . Please let me know how to over come on this
Warning: React does not recognize the winWidth prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase winwidth instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This would be a feature request, a property that would return a boolean value on whether or not the text was truncated or not, which would aid in adding a "More/Less" button/link based on if it's needed.

Hello !
I've come across an interesting bug using this library: when double-clicking outside of text on the last line, apparently Chrome simply crashes (the current tab).

That's happening on Chrome 76 and 77, I tried on Windows & Mac. I couldn't reproduce this on Firefox, Edge, Safari or Chrome 75 🤔.

You can try it there:
https://codesandbox.io/s/quirky-river-86m1v (try double-clicking on the "blank" near "multine text")

The documentation describes how to create a responsive ellipsis component, but it would be useful to instead export that component so that it doesn't need to be re-defined everywhere it is used.

My workaround was to wrap is with a div with title, but it would be great to have an option to this.

import LinesEllipsis from 'react-lines-ellipsis'

<div title="long long text">
  <LinesEllipsis
    text='long long text'
    maxLine='3'
    ellipsis='...'
    trimRight
    basedOn='letters'
  />
</div>

Like this:

import LinesEllipsis from 'react-lines-ellipsis'

<LinesEllipsis
  text='long long text'
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
  insertTitle
/>

I'm using a pretty simple version inside a Card component. The card is rendered for however many are in the array. for example 10.

<div className={'Cards-cardText'}>
   <LinesEllipsis
       text='hello'
       maxLine={3}
       basedOn='letters'
   />
</div

And at the body, level, I'm getting 10 of these.

<div class="LinesEllipsis-canvas " aria-hidden="true" style="box-sizing: content-box; width: 615px; font-size: 12px; font-weight: 400; font-family: &quot;Helvetica Neue&quot;, Arial, Helvetica, Verdana, sans-serif; font-style: normal; letter-spacing: normal; text-indent: 0px; white-space: normal; word-break: normal; overflow-wrap: normal; padding: 0px; position: absolute; bottom: 0px; left: 0px; height: 0px; overflow: hidden; border: none;">
    <span class="LinesEllipsis-unit">h</span>
    <span class="LinesEllipsis-unit">e</span>
    <span class="LinesEllipsis-unit">l</span>
    <span class="LinesEllipsis-unit">l</span>
    <span class="LinesEllipsis-unit">o</span>
</div>

What the heck am I doing wrong?

Whether to support IE browser(ie9+)？

复现方式， 列表非常多的时候，快速滚动会出现短暂的白屏。

with reference to #45 i think width clamping would be useful at least as a property that can be passed to the component. I understand if that wasn't the original usecase for the component, but multiple people have asked for it and it would be nice to not have to use a different package because of this one usecase

i have tried using the 'word-break': 'break-all' approach outlined in in the above link, which just causes the entire line to clamp and show the ellipsis, which is also not ideal. You have solved a difficult problem here by having an easy to integrate with react-component package that solves the multi-line ellipsis text problem well, except for this one case.

BasedOn option is ignored. When I set basedOn to 'letters' it doesn't work. Ir still selects a 'words'.
Here is snipped from code.

 key: 'reflow',
    value: function reflow(props) {
      /* eslint-disable no-control-regex */
      var basedOn = props.basedOn || /^[\x00-\x7F]+$/.test(props.text) ? 'words' : 'letters';
      switch (basedOn) {
        case 'words':
          this.units = props.text.split(/\b|(?=\W)/);
          break;
        case 'letters':
          this.units = Array.from(props.text);
          break;
        default:
          throw new Error('Unsupported options basedOn: ' + basedOn);
      }

If prop basedOn exists then 'words' will be selected. And it doesn't metter what value basedOn will have.
Could you please fix this issue.

Wondering, why are these lines needed? I'm getting this error in my env:

Error: Cannot find module 'aliasify' from '/Users/damassi/Sites/artsy/reaction  /node_modules/react-lines-ellipsis'

Error: Cannot find module 'babelify' from '/Users/damassi/Sites/artsy/reaction  /node_modules/react-lines-ellipsis'

As background, I'm using this lib in another lib which is then imported by a third app. The third app, when executing the code, runs into issues with Browserify. Since the package is compiled by babel, why force these additional steps on the consumer?

not clamps text on the server side or with JavaScript disabled

I would recommend highlighting this point and move to the top. I develop the project using Next.js and it was so confusing why the trimming works incorrectly... I even removed the package and then installed it again, reviewed all props few times before I found that this component should be rendered on the client-side only

I really think it might save time for many developers :)

only ellipses show in laptop or smaller resolutions

It would be a lot better if this component could accept children instead of having 2 versions, one for text and another for HTML (with unsafe stuff).

This should be possible:

<Ellipsis
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
>
  <span>Foo</span> bar!
</Ellipsis>

Looks like after you add more than .5px of letter spacing that it breaks the ... to a new line. Does the code handle scenarios like this?

A prop should be passed which revokes the truncation rule and show full text.

I've found that without parent width set explicitly component shows quite strange behaviour:
once text has second word (after first space) it desappears completely and is being replaced by ellipsis only.

Code is simple, nothing special:

<div style={{display: flex, fontSize: '0.7em', fontWeight: 'bold', textAlign: 'left'}}>
              <LinesEllipsis
                text={adv.title}
                maxLine='1'
                trimRight
                ellipsis='...'
                basedOn='letters'
                style={{fontSize: '0.8em', fontWeight: 'bold', textAlign: 'left'}}
              />
            </div>

Adding width to parent div resolves issue.

My environment:
"react": "16.4.0",
"react-lines-ellipsis": "0.13.2",

Probably this should be documented in readme somehow - I spent half a day trying to make it work under react-native-web first, then under pure react - behaviour is totally same.

Hello,
I wish to support a width prop, when a text is shorter than width, it just show like text, and when text is longer than width, the text should be cut down and show with an ellipsis. Now i set the style={{width: xxx}} to the component, when text is shorter than width, the component width is not fit-content, it is longer than text's width. Like this:

Many irrelevant dom nodes are getting added on the page due to react-lines-ellipsis.

Works fine in chrome 75.

Basic sample: https://45tee.csb.app/

一个页面使用很多组件会导致创建了很多div,感觉有点耗费内存。本身多行判断是个同步过程，公用一个div就可以实现。判断完了感觉也可以this.canvas.innerHTML = ''处理下

Any chance you could add type definitions to this package?
https://github.com/DefinitelyTyped/DefinitelyTyped

We are trying to try out your new HTML Ellipsis and we are not seeing it work. We tried your example as well but no luck. Do you have a working example we can see in Codepen ?

I tried ResponsiveEllipsis, but it failed at compile time.
AT https://github.com/xiaody/react-lines-ellipsis/blob/master/src/responsiveHOC.js#L2, it looks for lodash/debounce. Shouldn't it be lodash.debounce ?

I had tried to apply style animation with react-line-ellipsis module but can't get any working solution. Transition element is not supporting with this module, Please let me know anyone who faced this issue and resolved.

Here is my code:

**index.tsx**
<div>
  <h6>{title}</h6>
  <LinesEllipsis
    text={description}
    maxLine={this.state.maxLine}
    ellipsis='...'
    basedOn='letters'
    />  
  <a onClick={this.handleClick}>{this.state.toggle ? "less" : "more" }</a>
</div>


**styles.css**

.LinesEllipsis--clamped {
    transition: all ease-out .2s;
}

Can you please add Unit tests for this repo it will help a lot in catching early bugs on new changes.