[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

• 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