CezaryDanielNowak / React-dotdotdot

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

Different behavior in Chrome and Firefox #35

Closed emersonbroga closed 6 years ago

emersonbroga commented 6 years ago

I noticed that if depending on the number of child it behaves differently in chrome and firefox.

In the example below, dotdotdot has a p with 2 span.

<Dotdotdot
              clamp={ 3 }
              useNativeClamp={ false }
            >
              <p>
                <span>Either 2 the well was very deep, or she fell very slowly, </span>
                <span>for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</span>
              </p>
</Dotdotdot>

running it in chrome you get the 3 lines as expected, but in firefox just 2.

Chrome and Firefox

CezaryDanielNowak commented 6 years ago

Demo is fixed in version 1.2.3 - it happens when root line-height is not declared in pixels.

Fix for it would be appreciated

CezaryDanielNowak commented 6 years ago

There is discussion about this topic in #10