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

Created on 30 Jun 2017 · 6Comments · Source: w3c/csswg-drafts

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 https://github.com/w3c/csswg-drafts/issues/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.

css-ui-4

Source

phistuck

👍1

All 6 comments

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.

tabatkins on 30 Jun 2017

👍1

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

zachleat on 8 Mar 2018

👍1

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]).

frivoal on 9 Mar 2018

👍1

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.