v156 · css · overflow & typography
CSS text-overflow: <string> value
For two decades, CSS line truncation offered only two blunt edges: clip (slice glyphs mid-stroke) or ellipsis (append a fixed …). CSS Overflow Level 4 brings text-overflow: "<string>" and two-value text-overflow: "<start-string>" "<end-string>" to Chromium, letting authors supply custom indicator strings such as " (more)", " ➔", " / …", or bidirectional scroll markers "‹ " " ›" directly in CSS without fragile pseudo-element overlays or JavaScript character measurement loops.
concepts
-
Custom truncation markers
Interactive string builder testing localized and semantic overflow tokens (
" (more)"," ➔"," […]","…（続き）") with a live container-width slider,CSS.supports('text-overflow', '" (more)"')+getComputedStyleserialization probe, and a side-by-side simulated preview when the current browser only supports keyword values. -
Two-value bidirectional scroll
Interactive horizontal scroll container testing the two-value syntax
text-overflow: "‹ " " ›". As you scroll horizontally through an overflowing inline line, CSS Overflow 4 independently renders the start-edge string when content overflows on the inline-start side and the end-edge string when content overflows on the inline-end side, paired with a livescrollLeftand edge-state readout. -
Breadcrumb & filepath condenser
Practical developer workbench that condenses deep repository file paths and breadcrumbs using domain-specific markers (
text-overflow: " / …"andtext-overflow: "…/" " /…"), complete with accessible full-path keyboard disclosure and screen-reader parity verification.
why it shipped
Web applications routinely need truncation cues that carry more context than a generic three-dot ellipsis: news cards want " (more)" or localized equivalents like "…（続き）", command palettes and file trees need path delimiter hints like " / …", and horizontally scrollable pill bars benefit from two-value start/end overflow indicators ("‹ " " ›"). Previously, developers resorted to absolute-positioned gradient masks or resize-observer text splitting that broke selection, copy-paste, and bidirectional layout. Native text-overflow: <string> resolves truncation at paint/line-layout time while keeping the underlying DOM text intact for screen readers, find-in-page, and clipboard copy.
research record — use cases & exact surface
- Exact surface (CSS Overflow Module Level 4):
text-overflow: [ clip | ellipsis | <string> ]{1,2}. A single value applies to the inline-end edge of the line box; two values specify inline-start and inline-end overflow strings respectively when content overflows each edge (commonly encountered in scrollable inline containers). - Feature detection & CSSOM serialization: Detectable via
CSS.supports('text-overflow', '" (more)"')and two-valueCSS.supports('text-overflow', '"< " " >"'), plus reading backgetComputedStyle(el).textOverflowto verify quoted string retention in CSSOM. - Runtime flag: Enable in Chrome Canary/Dev via
--enable-experimental-web-platform-featuresor--enable-blink-features=CSSTextOverflowString(Firefox has also implemented string values for cross-engine comparison). - Use-case portfolio: (1) canonical single-string custom truncation builder + live CSSOM probe, (2) two-value start/end horizontal scroll container inspection, and (3) practical repository path/breadcrumb UI with accessible disclosure and screen-reader guarantees.