Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ellipsis does not work for long text #59

Open
aron-hivebrite opened this issue Feb 17, 2021 · 0 comments
Open

Ellipsis does not work for long text #59

aron-hivebrite opened this issue Feb 17, 2021 · 0 comments

Comments

@aron-hivebrite
Copy link

aron-hivebrite commented Feb 17, 2021

Hello Mr CezaryDanielNowak,

I have tried to use your Dotdotdot component like this

<Dotdotdot clamp={2}>
  hello everyonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRR
</Dotdotdot>

And I got:

Capture d’écran 2021-02-17 à 21 58 23

So, I did the following changes:

const ClampedText = styled(Box)`
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: inline-block;
  white-space: nowrap;
  -webkit-line-clamp: ${(props) => props.clamp ?? 1};
`;

And I used it like that:

<ClampedText clamp={2}>
  hello everyonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRReveryonFRRRRRRRRRRRRRRRR
</ClampedText>

And it worked for me:

Capture d’écran 2021-02-17 à 22 00 21

I only have changed the value of display and have added white-space.

Could you confirm if it is a bug in the component please?

Thx in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant