Weird behaviour without width set - no text, ellipsis only

[Alexander]

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.

[ShadTK]

I can confirm I'm having the same issue.
Only I can't set a parent fixed width since the div is supposed to be responsive.

"react": "^16.7.0",
"react-lines-ellipsis": "^0.14.0",

Is there any way around this?

[Robert Schönthal]

having this issue as well, all of a sudden!

[Tim Li]

I also get this, but only in a situation where I have a className applied based on component prop, which increases the size of the text. When increased, it just shows the ... instead of the text.

The parent div doesn't work because it restricts to a single line, whereas I need 3 lines.

[Mikayel Saghyan]

I have forked and fixed the issue, but the code is nowhere near good... However it is working nicely (no bugs were found during testing of a live app)

If you hint me how I could improve the code, I am willing to do it and make a PR.
https://github.com/xxmuaddib/react-lines-ellipsis

[xiaody]

Close due to inactivity and no reproductions.