Text noOfLines 1 whitespace with long words

[HaleyWardo]

Description

When using the Text component with noOfLines of 1, I would expect that the end word would break anywhere. Instead, the whole word wraps which causes empty whitespace.

Current behavior:

Expected behavior:

Link to Reproduction

Link

Steps to reproduce

• With a Text component, set noOfLines to 1
• Make the text content have really long words

Chakra UI Version

2.5.4

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

I've tried handling this on my own 2 ways:

1. Setting a ref to check if the text is truncated and if so then get the -webkit-line-clamp value to see if the current noOfLines is 1. The issue with this is that line-clamp is computed as none when noOfLines is a ResponsiveValue.
2. Creating a custom useCurrentBreakpointValue hook, which take a ResponsiveValue, maps that to a breakpoint value object ({base: '', sm: '', md: '', ...}), and then uses the useBreakpointValue hook to get the current value.

With both of these solutions, I would check if the text is truncated and if noOfLines === 1, if so then I would set word-break: "break-all".

However, I think this is super hacky and causes some undesirable flickering when rendering and resizing the browser. It would be nice if this is handled in the Text component itself.

[joaorodrs]

Hey Haley! Thanks for your contribution.

I observed that by default, when using -webkit-line-clamp, it uses the CSS initial value word-break: normal, which does not break words when clamping text, the same behaviour seen in the noOfLines={n} ChakraUI prop.

I think it would be wise to start a discussion about this change, because at the same time it makes more sense to use word-break: break-all every time noOfLines is applied, it would overwrite the default CSS value when trying to break lines (which is word-break: normal).

What do you think of this?

[HaleyWardo]

Hey Haley! Thanks for your contribution.

I observed that by default, when using -webkit-line-clamp, it uses the CSS initial value word-break: normal, which does not break words when clamping text, the same behaviour seen in the noOfLines={n} ChakraUI prop.

I think it would be wise to start a discussion about this change, because at the same time it makes more sense to use word-break: break-all every time noOfLines is applied, it would overwrite the default CSS value when trying to break lines (which is word-break: normal).

What do you think of this?

Yeah, I think a discussion would be a good start. Are you saying that you think word-break: break-all should be applied when noOfLines is provided no matter the number of lines? If that is the case, we would get something that looks like this:

Which would be an unexpected behavior unless we hyphenate the words.

[joaorodrs]

What I meant is that should be a discussion whether word-break: break-all should be applied when noOfLines caused the text to clamp.

[HaleyWardo]

What I meant is that should be a discussion whether word-break: break-all should be applied when noOfLines caused the text to clamp.

Thank you for clarifying! I 100% agree and would love to move forward with that discussion. Seems like it would be a good improvement.