[css-text-overflow] Custom Text Overflow with Punctuation Preservation css-text-overflow-1

Spec Reference: CSS Overflow Module Level 3 - text-overflow

The current text-overflow: ellipsis property in CSS truncates overflowing text and replaces it with an ellipsis (...). This is effective for straightforward text but less so for text involving special punctuation, such as quotes or questions.

Example

For instance, consider the sentence:

Delete 'Really really long name'?

Using current text-overflow: ellipsis, this might become:

Delete 'Really really long...

More instinctively, the text should truncate to:

Delete 'Really really lo...'?

This approach retains the context provided by the punctuation.

Proposed Solutions

1. Custom Text Overflow

   Introduce a way to allow custom text for text-overflow, with the capability to preserve trailing punctuation.

   .text {
     text-overflow: "...'?";
   }
   

   Here, the CSS specifies an ellipsis followed by a closing quote, followed by a question mark for text truncation.

2. Retain Punctuation Property

   Introduce a retain-punctuation CSS property to work in conjunction with text-overflow: ellipsis.

   .text {
     text-overflow: ellipsis;
     retain-punctuation: true;
   }
   

   Setting retain-punctuation: true would instruct the browser to automatically keep universally recognized trailing punctuation (", ', ?, and !) intact when applying text truncation.

Challenges

Determining what qualifies as "punctuation" could introduce complexity. Language-specific rules and various edge cases may present challenges. Therefore, an initial implementation could limit the support to universally recognized punctuation marks like ", ', ?, and !.

Use Cases

• Quoted text: To differentiate between the truncation and the end of the quote.
• Questions: To maintain the context of the question.
• Any text that includes critical punctuation at the end.

Alternatives Considered

The use of JavaScript to manually handle text truncation is possible but is generally more resource-intensive and less accessible.

Start with the CSS Overflow Module Level 3 text-overflow specification referenced in the issue and compare the two proposed approaches and examples. Done would require a resolved CSSWG direction for custom overflow text or punctuation retention, including defined behavior for the listed punctuation cases.