Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
texttechne opened this issue Jan 30, 2025 · 0 comments
Open
1 task done

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

texttechne opened this issue Jan 30, 2025 · 0 comments
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD

Comments

@texttechne
Copy link

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.
@texttechne texttechne added the bug This issue is a bug in the code label Jan 30, 2025
@kskondov kskondov self-assigned this Jan 30, 2025
@kskondov kskondov removed their assignment Jan 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD
Projects
Status: New Issues
Development

No branches or pull requests

2 participants