CSSʵÏÖtext overflow:ellipsisµÄЧ¹û
ÊÊÓÃÓÚÖ»ÓÐÒ»ÐÐÎÄ×ÖµÄÇé¿ö.
.ellipsis{
text-overflow:ellipsis; /*µ±¶ÔÏóÄÚÎı¾Òç³öʱÏÔʾʡÂÔ±ê¼Ç(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflowÊÇCSS3µÄÊôÐÔ£¬IE6ÒÔÉÏ°æ±¾¡¢Safari¡¢chrome Ö§³Ö¡£Ëü¿ÉÒÔ´ø2¸ö²ÎÊý£º
clip [²»ÏÔʾʡÂÔ±ê¼Ç£¨...£©£¬¶øÊǼòµ¥µÄ²ÃÇÐ];
ellipsis[µ±¶ÔÏóÄÚÎı¾Òç³öʱÏÔʾʡÂÔ±ê¼Ç£¨...£©];
Firefox3³öÀ´ÁË£¬ÈÔÈ»²»Ö§³Ötext-overflow:ellipsis;
½â¾ö·½·¨¿ÉÒÔͨ¹ýFirefoxÇ¿´óµÄXUL°ó¶¨ÊµÏÖÈçÏ£º
-moz-binding: url('ellipsis.xml#ellipsis');
°ó¶¨µÄXMLÄÚÈÝÈçÏ£º
<?xml version="1.0" encoding="utf-8" ?>
<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 id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>
xul:descriptionµÄcropÔÀ´ÊÇÄÇÑùÇ¿¡£¡£³ýÁË¿ÉÒÔµãµãµãµôºóÃæµÄ¡£¡£»¹¿ÉÒÔµãµãµãÇ°Ãæ»òÕßÖм䲿·ÖµÄ¡£¡£Õâ¸ö¹¦ÄÜ¿ÉÊǷdz£ÊµÓÃŶ£¬²»ÖªµÀW3CϺÃ×ʱºòÒ²¸øÕâÑùµÄCSSÊôÐÔÈÃÎÒÃǼòµ¥¸ã¶¨Ò»´ó¶ÑÎÊÌâÄØ¡£
È»ºó»¹²»Ð¡ÐÄ·¢ÏÖ¡£hedgerÇÄÇĵÄҲʵÏÖÒ»ÑùµÄ¹¦ÄÜHacking text-overflow for Firefox£¬²»¹ý»¹ÊǸоõÓÃXBL¼ò½à·½±ã¡£¡£
ÔںܾúܾÃÒÔÇ°£¬ÎÒÒ²ÔÚÑо¿£¬Äܲ»Äܵ÷ÓÃfirefox´¦ÀítitleµÄµãµãµãµÄ¶«¶«À´Íê³ÉЧ¹û£¬²»¹ýһֱûʵÏÖ¡£Ö®Ç°Ìá³öµÄ-moz-text-overflow: ellipsis;viaÕâÖÖ²»¿¿Æ×µÄ˵·¨Ò²²»ÐУ¬¿´À´È˼ÒÊÇÌúÁËÐÄ¡£
Ïà¹ØÎĵµ£º
1.css ×ÖÌå¼òд¹æÔò
¡¡¡¡µ±Ê¹ÓÃcss¶¨Òå×ÖÌåʱÄã¿ÉÄÜ»áÕâÑù×ö:
¡¡¡¡font-size: 1em;
¡¡¡¡line-height: 1.5em;
¡¡¡¡font-weight: bold;
¡¡¡¡font-style: italic;
¡¡¡¡font-variant: small-caps;
¡¡¡¡font-family: verdana,serif;
¡¡¡¡
ÊÂʵÉÏÄã¿ÉÒÔ¼òдÕâЩÊôÐÔ:
¡¡¡¡font: 1em/1.5em bold italic small-caps ver ......
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓÐͳһµÄ¹æ·¶À´½øÐÐCoding£¬ÒÔ·½ ......
¶¨Î»Ò»Ö±ÊÇWEB±ê×¼Ó¦ÓÃÖеÄÄѵ㣬Èç¹ûÀí²»Çå³þ¶¨Î»ÄÇô¿ÉÄÜӦʵÏÖµÄЧ¹ûʵÏÖ²»ÁË£¬ÊµÏÖÁ˵ÄЧ¹û¿ÉÄÜ»á×ßÑù¡£Èç¹ûÀíÇåÁ˶¨Î»µÄÔÀí£¬ÄǶ¨Î»»áÈÃÍøҳʵÏֵĸü¼ÓÍêÃÀ¡£
¶¨Î»µÄ¶¨Ò壺
ÔÚCSSÖйØÓÚ¶¨Î»µÄÄÚÈÝÊÇ£ºposition:relative | absolute | static | fixed
static ûÓÐÌرðµÄÉ趨£¬×ñÑ»ù±¾µÄ¶¨Î»¹æ¶¨£¬²»ÄÜͨ¹ýz-index½ ......
margin£º²ãµÄ±ß¿òÒÔÍâÁôµÄ¿Õ°×
background-color£º±³¾°ÑÕÉ«
background-image£º±³¾°Í¼Æ¬
padding£º²ãµÄ±ß¿òµ½²ãµÄÄÚÈÝÖ®¼äµÄ¿Õ°×
border£º±ß¿ò
content£ºÄÚÈÝ
²½ÖèÒ»¡¢
·ÖÎöÒ»¸öµäÐ͵Ķ¨ÒådivÀý×Ó£º
#sample{
margin:10px;
border: #111 10px solid;
......