CSS: omitting and displaying text in table td

The so-called "omitted" means to display the extra words with "...", while the display means to display the omitted words again when you move the mouse over td. For a table, CSS is compatible with the omitted methods of IE, FF, and Chrome:

 1 table{ 2     width:200px; 3     table-layout: fixed; 4 } 5 .autocut{ 6     overflow:hidden; 7     white-space:nowrap; 8     text-overflow:ellipsis; 9     -o-text-overflow:ellipsis;10     -icab-text-overflow: ellipsis;11     -khtml-text-overflow: ellipsis;12     -moz-text-overflow: ellipsis;13     -webkit-text-overflow: ellipsis;14 }15 .autocut:hover16 {17     overflow:visible;18     white-space:normal;19     word-wrap: break-word;20 }

In use, assign autocut to the clss class of td:

1 <table> 2 <thead> 3 <tr> 4 <th> Column1 </th> 5 <th> Column2 </th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td> Column1 </td> 11 <td class = "autocut"> 12 automatic tailoring! Auto crop! 13 </td> 14 </tr> 15 </tbody> 16 </table>

Note that this statement must be added to the HTML file:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Otherwise, IE will not work. Of course, because IE6 only supports the label for hover, IE6 cannot be displayed through css (you can add the label to td, and then set its css, or use js to handle the event ),:

　　

Reprinted please indicate the original address: http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html