`text-overflow: ellipsis middle`

This is a minimal demo of the proposed middle ellipsis spec for text overflow handling. The elements are styled by declaring custom CSS property --text-overflow, and truncated according to the spec (with some caveats, e.g. float not yet implemented).

ℹ️ This demo breaks a truncated text into two parts and apply text-overflow: ellipsis on the prefix.

Syntax

text-overflow = [ [ clip | <overflow-marker> ] && [ start | end ]? ]{1,2}
                | [ <overflow-marker> && [ middle | <length-percentage> ] ];
                <overflow-marker> = [ ellipsis | <string> | fade | <fade()> ];

Demo

Offset calculation

The quick brown fox jumps over the lazy dog by the river bank

Grapheme

👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦

RTL

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

Bidirectional text

bahrain مصر kuwait

The title is مفتاح معايير الويب in Arabic.

The title is AN INTRODUCTION TO c++ in arabic.

W3C מעביר את שירותי הארחה באירופה ל - ERCIM.

Bidirectional text - file names

report_تقرير_final.pdf

تقرير_السنوي.docx

تقرير_2024_annual_report.pdf

report_تقرير.pdf

file_name.תקציר

draft(تقرير).docx

Small line box (overflow marker > prefix > suffix priority)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Scrollable

Scroll sideways: the suffix stays put at the line-end edge while the start scrolls under it, and the marker disappears once nothing is left hidden.

This text is for testing how scrollable truncation is handled.