[SF][Text]: [Long string is not wrapped in flex container] - Githubissues

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience

https://sap.github.io/ui5-webcomponents-react/

Apache License 2.0

426 stars 94 forks source link

[SF][Text]: [Long string is not wrapped in flex container] #5949

Closed Jasonl157 closed 2 weeks ago

Jasonl157 commented 2 weeks ago

Describe the bug

With the default wrapping, when the Text is a long string and inside a flex container, it's not wrapped

Isolated Example

https://stackblitz.com/edit/github-1yycgh-wodi7h?file=src%2FApp.tsx

Reproduction steps

Open the StackBlitz link shared.
You can see that the first Text overflows. In contrast to that, the second Text with overflow-wrap: anywhere is wrapped

Expected Behaviour

Long string inside flex container is wrapped

Screenshots or Videos

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

Lukas742 commented 2 weeks ago

Hi @Jasonl157

the Text uses overflow-wrap: break-word and since your text is is just a single long word, it doesn't wrap. If you want to wrap text anywhere, then setting the CSS property to anywhere as you did is the correct approach.

Since this behavior is by design, as words are typically not that long, I'm closing this issue.