Table in the TD out of content hiding, mouse hover all display (full version, including JS code)

First, CSS syntax: text-overflow:clip | Ellipsis default: Clip applies to: All elements clip: Omit tags (...) are not displayed when the text inside the object overflows. ), instead of cutting out the overflow part. Ellipsis: Displays ellipsis (...) when text inside an object overflows. ）。 In use, sometimes found that there will be no ellipsis effect, after testing found that the use of ellipsis, must cooperate with the Overflow:hidden; White-space:nowrap; width:50%; These three styles work together to have an effect instance:

Table{width:100%;float: Left;Table-layout:fixed;width:500px;Border:1px solid #ccc; }Table TR{Line-height:25px;Border:1px solid #ccc; }Table TD{Border:1px solid #ccc;text-align:Center; }            . Mhover{Border:1px solid #ccc;White-space:nowrap;Text-overflow:ellipsis;Overflow:Hidden; }

Second, HTML code

<Table><TR><th>Name</th><th>Personal signature</th><th>Gender</th></TR><TR><TD>Leslie</TD><TD><Divclass= "Mhover">I am me, the color is not the same fireworks!</Div><Divclass= "MALL">I am me, the color is not the same fireworks!</Div></TD><TD>Man</TD></TR></Table>

Note: class= "Mhover" is the content displayed in the table, the content length is more than the specified width when the extra fields are hidden and added ... class= "MALL" is the content of the mouse hover display. Third, JS code

$ (document). Ready (function () {            $(". MALL "). Hide (); $(". Mhover "). MouseOver (function(e) {$ ( This). Next (". MALL "). css ({" position ":" Absolute "," top ": e.pagey+5," left ": e.pagex+5}). Show ();            }); $(". Mhover "). MouseMove (function(e) {$ ( This). Next (". MALL "). CSS ({" Color ":" FFF "," position ":" absolute "," opacity ":" 0.7 "," Background-color ":" 666 "," Top ": E.pagey + 5," lef T ": E.pagex + 5 });            }); $(". Mhover "). Mouseout (function () {                $( This). Next (". MALL "). Hide ();        }); });

Note: class= "Mhover" is the content displayed in the table, the content length is more than the specified width when the extra fields are hidden and added ... class= "MALL" is the content of the mouse hover display.

Table in the TD out of content hiding, mouse hover all display (full version, including JS code)