How to solve text overflow using CSS

Text overflow is always a big problem, especially in programmatic environments. There is always only so much space, but variable content can be added to that space. I was recently working on a table used to display user information and noticed that longer strings were breaking up the table display. The obvious solution is to add an overflow: hidden setting for table cells, but even then the text doesn't look naturally cut off. The way to make text overflow elegant is to use ellipses and the CSS' text-overflow property. let's see!

CSS

Creating the CSS behind the ellipsis is very simple, including width, wrapping, overflow and text overflow:

.dataTable td { 
/ * essential * / 
text-overflow ：ellipsis ; 
width： 200px ; 
white-space： nowrap ; 
overflow：hidden ;
/ *外观漂亮* / 
padding： 10px; 
}

Setting the width provides a clear border , white space prevents normal next line wrapping, hidden overflow ensures the width dimension is respected, and the text overflow setting provides ellipses. Awesome, right? But there's a problem...

Firefox and Ellipses

Unfortunately, Firefox does not currently support text overflow: ellipses. The Dojo Toolkit provides a simple solution for Firefox: dojox.html.ellipsis. This resource uses an iFrame shim to create ellipses. Here's how to use it:

//需要资源 dojo 。require （“dojox.html.ellipsis” ）;

After requiring the JavaScript resource, it's time for dojoxEllipsis to place a node in the page indicating that the dojox.html.ellipsis resource should ellipse it:

< div  class = “ dojoxEllpsis ” > Pellentesque居住者morbi tristique senectus et netus et malesuada ... </ div >

dojoxEllipsis Every time the DOM tree is modified, Dojo searches the page for an element with a CSS class and ellipses it.

Implementing dynamic ellipses for content is a simple, subtle, and effective way to elegantly manage content within restricted content. Text overflow: Ellipses are supported by major browser vendors except Firefox. Dojo's implementation is stable and efficient, but can slow down the page if there are many oval elements on the page. Happy ovalization!

The above is the detailed content of How to solve text overflow using CSS. For more information, please follow other related articles on the PHP Chinese website!