Home >Web Front-end >CSS Tutorial >How Can I Efficiently Truncate Long Strings with CSS and Handle Cross-Browser Compatibility?
Truncating Long Strings with CSS: Excellence Achieved
Truncating text with HTML and CSS can be a conundrum, especially when grappling with its presentation within fixed layouts. Server-side truncation based on logical width has its limitations and often requires continuous adjustments to ensure optimal results.
However, the advent of CSS text-overflow: ellipsis has revolutionized this process. This property, now supported by major browsers, cuts off overflowing text and appends ellipses to indicate truncation.
Justin Maxwell has crafted a cross-browser CSS solution that leverages the aforementioned property. While it prevents text selection in Firefox, it effectively trims content and displays ellipses as desired.
CSS Implementation:
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); }
XML Binding for Firefox Support:
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding>
Node Content Update in Firefox:
Updating node content that uses ellipsis in Firefox requires a different approach:
function replaceEllipsis(node, content) { node.innerHTML = content; if (YAHOO.env.ua.gecko) { var pnode = node.parentNode, newNode = node.cloneNode(true); pnode.replaceChild(newNode, node); } }
With this enhanced solution, truncating dynamic text in fixed layouts is no longer a daunting task. Text-overflow: ellipsis has paved the way for streamlined content presentation, eliminating the need for server-side guesstimates and ensuring cross-browser compatibility.
The above is the detailed content of How Can I Efficiently Truncate Long Strings with CSS and Handle Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!