Text: Text component ignores the remaining width and truncates earlier than expected, if it encounters a long word, which it can't fit in that line

[arijitpatra-sap]

Describe the bug

I observed a case, where the Text component ignores the remaining width and truncates earlier than expected, if it encounters a long word, which it can't fit in that line. This can look confusing and seems like sub-optimal usage of the real-estate.

I tried locally, this seems to be solvable using CSS word-break: break-all. I was thinking if this can be changed in the component level (if there aren't any issue) then it will be nice for everyone and for consistency.

Isolated Example

No response

Reproduction steps

Try with a very very long word, make up something... and make sure maxLines is 1.

Expected Behaviour

The ellipses should be shown at the end of the line

Screenshots or Videos

UI5 Web Components for React Version

both v1 and v2

UI5 Web Components Version

not sure... whatever is used with @ui5/webcomponents-react v1 and v2

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @arijitpatra-sap

as discussed internally, wrapping needs to be set to true for maxLines to work properly. The linked PR outlines this better and also fixes the behavior with maxLines <= 1:

• maxLines <=1: the same behavior as wrapping: false is applied.
• maxLines > 1: i.a. word-wrap: break-word; is applied

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.29.12 🎉

The release is available on v1.29.12

Your semantic-release bot 📦🚀