text-overflow:ellipsis的巧妙運用

2013-10-27

關鍵字: text-overflow:ellipsis

語法：text-overflow : clip | ellipsis

取值：

clip ：默認值。不顯示省略標記(...)，而是簡單的裁切.

ellipsis：當對象內文本溢出時顯示省略標記(...).

可惜text-overflow 還只是ie的私有屬性而已，也沒被收錄到w3c標準里 .

如果想讓某個容器（div或者li或者...塊級元素）顯示一行文字，當文字內容過多時，不換行，而是出現...

這樣寫：例如

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">外貿網站建設-外貿網站設計</div>
</body>
</html>
注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要給容器定義寬度.

2.如果少了overflow: hidden;文字會橫向撐到容易的外面

3.如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略號也不會出現，多余的文字會被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字會被裁切掉，就相當于你這樣定義text-overflow:clip.

如果容器是table，當文字內容過多時，不換行，而是出現...

這樣寫：例如

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>外貿網站建設-外貿網站設計</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">

</body></html>

注意：

1.一定要給table定義table-layout:fixed;只有定義了表格的布局算法為fixed，下面td的定義才能起作用。

其它的要點和上面一樣

text-overflow 的兼容性：

測過ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容

911亚洲精品视频-亚洲日本在线看片-摸胸软件-三级**毛片|www.szkangyu.net

text-overflow:ellipsis的巧妙運用