[css-overflow-3] Provide new truncating text options which clip whitespace or punctuation conditionally #7919
Description
Related Spec: https://www.w3.org/TR/css-overflow-3/
The problem
Currently, when using text-overflow: ellipsis;, you might encounter situations where text is awkwardly truncated. For example, the text, "Truncated text, wouldn't ya know" can be truncated in several awkward ways, the most notable listed below, and also as demonstrated in the below screen recording.
- Truncated …
- Truncated t…
- Truncated text,…
- Truncated text, …
- Truncated text, w…
- Truncated text, wouldn't…
- Truncated text, wouldn't …
- Truncated text, wouldn't y…
- Truncated text, wouldn't ya …
Click to expand all truncated forms
- T…
- Tr…
- Tru…
- Trun…
- Trunc…
- Trunca…
- Truncat…
- Truncate…
- Truncated…
- Truncated …
- Truncated t…
- Truncated te…
- Truncated tex…
- Truncated text…
- Truncated text,…
- Truncated text, …
- Truncated text, w…
- Truncated text, wo…
- Truncated text, wou…
- Truncated text, woul…
- Truncated text, would…
- Truncated text, wouldn…
- Truncated text, wouldn'…
- Truncated text, wouldn't…
- Truncated text, wouldn't …
- Truncated text, wouldn't y…
- Truncated text, wouldn't ya…
- Truncated text, wouldn't ya …
- Truncated text, wouldn't ya k…
- Truncated text, wouldn't ya kn…
- Truncated text, wouldn't ya kno…
text-overflow-issue-example.mov
Description of the proposal
text-overflow-style
I propose introducing new text-overflow-style property that provides options for choosing how text is truncated, regardless of whether an ellipsis is used. These options would be…
text-overflow-style: by-character; /* show all characters, default */
text-overflow-style: by-word; /* same as orphans(0) */
text-overflow-style: no-orphans; /* same as orphans(1) */
text-overflow-style: orphans(x); /* min number of chars to be shown */These options allow text to be truncated…
- by the character (
by-character) so all letters can be truncated mid-word, the same as the current default - by the character (
by-word) so text is truncated by whole words, with no mid-word truncation — possible exception to be made if there is not enough room for the first whole word - without single orphan letters (
no-orphans) so truncated text never begins with a space followed by a single character (e.g. "Truncated t…")
text-overflow-exclude
In addition to this, I propose that either—
-
truncation always truncate whitespace and special characters, or…
-
provide an additional property to select which special cases should also be excluded/truncated
That may look something like this:
text-overflow-exclude: white-space special-chars;
This property would allow a user to opt-in/out of which special cases they want truncating to apply for (e.g. whitespace, punctuation/special characters) at the end of strings. All options should be space-delimited, optional, and order-agnostic.
By default, I think this option should be set to truncate both whitespace and punctuation.