關(guān)鍵字: text-overflow:ellipsis
語法：text-overflow : clip | ellipsis
取值：
clip ：默認(rèn)值 舵鳞。不顯示省略標(biāo)記(...)，而是簡(jiǎn)單的裁切.
ellipsis： 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...).
可惜text-overflow 還只是ie的私有屬性而已，也沒被收錄到w3c標(biāo)準(zhǔn)里 .
如果想讓某個(gè)容器（div或者li或者...塊級(jí)元素）顯示一行文字惕医，當(dāng)文字內(nèi)容過多時(shí)，不換行，而是出現(xiàn)...
這樣寫：例如
Html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<div id="box">胡中齊Vinch</div>
</body>
</html>
注意：他們一定要一起用
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
1.一定要給容器定義寬度.
2.如果少了overflow: hidden;文字會(huì)橫向撐到容易的外面
3.如果少了white-space:nowrap;文字會(huì)把容器的高度往下?lián)危患词鼓愣x了高度拜效，省略號(hào)也不會(huì)出現(xiàn)，多余的文字會(huì)被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字會(huì)被裁切掉各谚，就相當(dāng)于你這樣定義text-overflow:clip.
如果容器是table紧憾，當(dāng)文字內(nèi)容過多時(shí)，不換行昌渤，而是出現(xiàn)...
這樣寫：例如
Html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table{table-layout:fixed;width:106px;}
td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"><tr><td>胡中齊Vinch</td></tr></table></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">table{table-layout:fixed;width:106px;}td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style></head><body><table cellspacing="0" cellpadding="0"><tr><td>胡中齊Vinch</td></tr></table>
</body></html>
注意：
1.一定要給table定義table-layout:fixed;只有定義了表格的布局算法為fixed赴穗，下面td的定義才能起作用。
其它的要點(diǎn)和上面一樣
text-overflow 的兼容性：
測(cè)過ie6膀息，ie7般眉，ff3，safari潜支，opera煤篙，chorme，只有ff3和opera不兼容
