[css-overflow] Consider support for ellipsizing only whole words

[phistuck]

https://drafts.csswg.org/css-overflow/ - I think.
Authors should be able to control the way ellipsizing happens - whether it shows incomplete words, or only whole words. I would even split the incomplete words way to two sub-ways -

• Exclude any punctuation right before the ellipsis even though the available space allows it to render ("don't" and "Person" can be be "don..." and "Person..." instead of "Don'..." and "Person<", respectively). Basically have another step before actually adding the ellipsis - truncate up to the first letter or number and then add an ellipsis.
• Include any punctuation right before the ellipsis as the available space allows it to render

The lack of this feature (controlling whole versus incomplete) as well as #390 render text-overflow: ellipsis; useful in very few cases, because usability experts (at least those with which I work) usually do not want incomplete words to show up on the screen.

[tabatkins]

Concretely, we can probably base how far to elide on hyphenation rules - anywhere it's appropriate to hyphenate a word, it's okay to truncate the word to.

[zachleat]

Not sure if this is the right place to put this I think it’s at least worth noting: @joshvickerson on Twitter had the idea that text-overflow: ellipsis should interop with overflow-wrap when deciding whether or not to truncate partial words.

https://twitter.com/joshvickerson/status/971799491497119749

[frivoal]

We just drafted block-overflow in answer to #390 to insert an ellipsis at the end of a truncated paragraph (unline text-overflow which inserts an ellipsis at the end of an overflowing line). This one does interact with the line-breaking controls from css-text (overflow-wrap, word-break, line-break…), so you get pretty fine grained control over what gets elided, as requested here.

However for text-overflow, it is a bit more tricky. You cannot use the line breaking controls for that, because if the line breaks then it doesn't overflow, and there's no ellipsis.

I think we could add some additional controls in css-ui-4 for the text-overflow property to enable controlling what/how much gets elided, but it would probably have to be additional values to the text-overflow property itself (e.g. text-overflow: ellipsis break-word vs text-overflow: ellipsis no-break), or a separate property (e.g. text-overflow-opportunity: anywhere | [hyphens || spaces || punctuation]).

[MatsPalmgren]

Please make sure any syntax change to text-overflow is compatible with the two-value syntax (which is supported in Firefox). For example, text-overflow: ellipsis break-word ellipsis might be ambiguous whether the break-word keyword belongs to the first or second value.

[frivoal]

Please make sure any syntax change to text-overflow is compatible with the two-value syntax (which is supported in Firefox).

Definitely. The two value syntax is specified in level 4, and any addition would go to level 4 (or later), so we couldn't miss it anyway.

[chrishtr]

I think this proposal is still valuable, hope it can be worked out soon. @frivoal would it be as simple as text-overflow: ellipsis break-word?