[Text]: Word Break instead of Ellipsis for Single Line Text

[texttechne]

Bug Description

UI5's Text control allow to set wrapping="false" which then implements the typical ellipsis. Previous versions of Text (prior to 2.0) which probably relied on UI5WC-React also supported this by wrappingType="None".

The current implementation only allows to set maxLines=1. Doing this will also show an ellipsis, but it is implemented via word break. This can lead to very suprising text display.

Example: Edit the code sample on https://sap.github.io/ui5-webcomponents/components/Text/

<ui5-text max-lines="1" style="width: 6rem">Simple Texttttttttttttttttttttttttttttttttttttt</ui5-text>

Result: Simple...

Since the second word is too long for the provided width, the text breaks at the word level. This behavior is correct for text spanning multiple lines. However, for single line text it is a bug. Imagine any scenario with limited space (mobile devices come to mind) and an unfortunate combination of long words (over which we usually don't have any control).

Affected Component

Text

Expected Behaviour

For single line text the classical ellipsis behavior should apply. Take Label as example of this behavior.

Behaves like UI5 does. Example: https://ui5.sap.com/#/entity/sap.m.Text/sample/sap.m.sample.Text/code View.xml:

<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<VBox class="sapUiSmallMargin">
		<Text wrapping="false" width="6rem" text="Simple Texttttttttttttttttttttttttttttttttttttt" />
	</VBox>
</mvc:View>

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.x

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

[dimovpetar]

Hello @texttechne ,

Text wrapping is dependant on the -webkit-line-clamp property - https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp, which seems to not display partial words in most of the cases. To override this behaviour, you can set the styles as follows:

<ui5-text style="width: 6rem; display: inline-block; white-space: nowrap; text-overflow: ellipsis;">Simple Texttttttttttttttttttttttttttttttttttttt</ui5-text>

Does this work for you?

Best regards, Petar

[texttechne]

Hi @dimovpetar,

sure, works. Thanks!

But we agree, that this should apply automatically for single line text?

Best Regards

[dimovpetar]

@texttechne this is now the default behavior for single line texts :)

[ui5-webcomponents-bot]

:tada: This issue has been resolved in version v2.8.0-rc.3 :tada:

The release is available on v2.8.0-rc.3

Your semantic-release bot :package::rocket:

[texttechne]

Hi @dimovpetar, thank you very much! Much appreciated!

[nnaydenow]

Hi @dimovpetar,

This fix introduces regression when using text in ui5-table: check here

Could you please check?

[arijitpatra-sap]

Hi @dimovpetar

do we have a timeline, when can we expect the fix since it's affecting us. Thank you. :)

[dimovpetar]

Hello @SAP/ui5-webcomponents-table ,

Seems that using cell item with white-space: nowrap style breaks the layout. See test sample here. Can this be avoided?

Best regards, Petar

[aborjinik]

@dimovpetar I believe this question is related to the compat/Table, and not something that @SAP/ui5-webcomponents-table is responsible for.

[dimovpetar]

Correct, this is the compatibility table.

[nnaydenow]

Hi @arijitpatra-sap,

Do you set width to the specific column? If yes, you can replace the width with max-width to the specific cell as a workaround until we provide a fix.

Regards, Nayden

[arijitpatra-sap]

Hi @nnaydenow , thanks for suggesting this approach, I tried this earlier and it works, but I ultimately went ahead with another solution for a temporary fix. Let me know once it is done, I will revert my temporary fix. Thank you.