UI5 / UI5/webcomponents

Label control: expose a wordBreakPolicy property to work together with the wrappingType one

Open
#10,906 3 comments 0 reactions 1 assignee View on GitHub

@olannyv is already working on this.

Since Feb 20, 2025.

feature request TOPIC RD
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Is your feature request related to a problem?

With a limited-width Label, when the text content has to be shown entirely, the property wrappingType set to Normal allows the text to be displayed on several lines.

But if the content text contains a "word" that is too long to be fully displayed, this word is by default truncated, and no ellipsis is shown.

Using WrappingType.Normal, the intention seems clearly to display the whole content.
To do so, we need to use the wrappingType property, plus a CSS element with, eg, the property wordBreak set to "break-word".
This is not very intuitive not consistent.
As these 2 properties work logically together, they should be exposed by the control at the same "level", ie as properties, and not one as a property, and the other one as a parameter of the CSS style.

Describe the solution you'd like

Create a new property to manage the wrapping policy of long words when wrappingType is set to Normal.

Describe alternatives you've considered

Use the wrappingType UI5 property plus CSS.

Additional Context

A quick sandbox to show the Label with different parameters

Organization

No response

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.