SplitButton: No truncation with ellipsis for long texts in SplitButton

[arijitpatra-sap]

Describe the bug

Right now it seems there is no way I can truncate long text in SplitButton with ellipsis

I also tried with the Text component as a child with maxLines 1, but that too didn't work and moreover on using the Text component as a child the styling of the text is not like that of SplitButton's.

It would be good to support truncation of long text in SplitButton.

This shows an example of long text in SplitButton:

Isolated Example

No response

Reproduction steps

Add a very long text to the SplitButton and see

Expected Behaviour

this is what is desired (right now not possible with the current SplitButton):

Screenshots or Videos

This shows an example of long text in SplitButton:

and this is what is desired (right now not possible with the current SplitButton):

UI5 Web Components for React Version

2.11.1

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[nnaydenow]

Hello @SAP/ui5-webcomponents-topic-b,

Could you please take a look?

[GDamyanov]

Hi @arijitpatra-sap,

The desired behaviour could be achieved following the responsive behaviour of the components: https://www.sap.com/design-system/fiori-design-web/ui-elements/button-web-component/?external#responsive-behavior . This is a link with example: Split Button text truncation (text-overflow-ellipsis)

Regards, Georgi

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!

[arijitpatra-sap]

Hi @GDamyanov

I checked your solution, unfortunately it doesn't address my use case... the split button that I have is on a side panel and the width of the button grows till the max-width of the button when resizing the side panel.

So I cannot put a static width to the split button.