Text not wrapping
andreivettor opened this issue · comments
Describe the bug
white-space: nowrap on inner doesn't allow marquee item text to wrap and makes the extend beyond parent container.
To Reproduce
Steps to reproduce the behavior:
- Have text wider than marquee container
- Observe wrapping issues
Expected behavior
The text should wrap and stay inside the parent container
Screenshots
Aditional information
This is for a vertical marquee
Hey @andreivettor
To wrap text in the marquee, you need to place the text in another parent component, let's say maybe a div, and add a white-space property to that div (maybe with a fixed width or a max-width). I kept it nowrap for the direct children of the Marquee, however, you control the grandchildren of the marquee.
I hope this helps!
Thanks @jagnani73! Much cleaner this way. But still, shouldn't wrapping be default behavior? At least, I expect it when using components like this.
@andreivettor Its shouldn't actually, for the use case:
<Marquee>What will happen to this text in this use case?</ Marquee>
Keeping the white-space: nowrap still enables the flexibility to do everything desired, however, keeping white-space: wrap will eradicate that freedom.
@jagnani73 I see what you mean. Maybe a specific style could be implemented for axis={"Y"}? That's the use case I am concerned about.
@andreivettor There's no need to that since the grandchild logic works 😄
@jagnani73 I'm not sure what you mean by that. Then maybe you can specify in the docs that on the Y axis wrapping needs to be set specifically with white-space: normal?
@jagnani73 I'm not sure what you mean by that. Then maybe you can specify in the docs that on the Y axis wrapping needs to be set specifically with white-space: normal?
Ill figure something out!
Thank you!