Text noOfLines 1 whitespace with long words about chakra-ui HOT 4 OPEN

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

from chakra-ui.

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.

from chakra-ui.

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?

from chakra-ui.

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.

from chakra-ui.