Chrome 157 ships text-overflow: string, 15 years after Firefox
The property finally takes a custom string instead of the default ellipsis when text is clipped, something Firefox has supported since 2011.
Chrome 157, in stable from 3 November, adds a <string> value to the CSS text-overflow property. Set it on a clipped element and Chrome renders your own text, such as "(more)", instead of forcing the default ellipsis.
Firefox has supported this since version 9, back in 2011. Until now, a custom truncation indicator in Chrome meant measuring text in JavaScript or covering the ellipsis with a positioned pseudo-element.
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: "(more)";
}Why it matters: if you built one of those workarounds, you can delete it. One declaration now does what used to take measuring and layout tricks, and it respects the box’s actual rendering rather than an estimate.
The caveat: keep the plain ellipsis line before the string value, as above. A browser that doesn’t understand the string treats it as an invalid value and ignores that line, so it falls back to the ellipsis rather than breaking.