Can CSS Truncate Long Strings and Display an Ellipsis Reliably?

Can CSS Truncate Long Strings?

Is it possible to truncate text using only HTML and CSS, enabling dynamic content to fit within a predefined fixed-width and fixed-height design?

Historically, truncating text was performed server-side based on an estimated number of characters. However, this approach was unreliable due to the varying widths of characters. To address this issue, a browser-based solution was sought that could determine the actual rendered width of the text.

Initially, IE's text-overflow: ellipsis property was identified as a potential solution. However, this feature was not supported by other browsers, particularly Firefox.

Various CSS-based workarounds emerged, using techniques like overflow: hidden. However, these methods either failed to display an ellipsis indicator or displayed it even when the text was not truncated.

As a potential solution, Justin Maxwell proposed a cross-browser CSS technique that involves using a hidden ellipsis.xml file. This method effectively truncates the text using an ellipsis, but it has the drawback of preventing text selection in Firefox.

Updated Solution

With the release of Firefox 7 in 2011, support for the text-overflow: ellipsis property became widespread, eliminating the need for workarounds. This property allows for precise text truncation with an ellipsis indicator.

Additionally, a technique was developed to update the content of a truncated node while maintaining support in Firefox. This involves using the replaceEllipsis function to clone and replace the node whenever its content is changed.

The above is the detailed content of Can CSS Truncate Long Strings and Display an Ellipsis Reliably?. For more information, please follow other related articles on the PHP Chinese website!