css居然有根據容器寬度自動截取長度加省略號功能，強大!!
作者：
☆威廉古堡♂
項目中最初的做法（js截取）：
//字符長度截取包括中英文混合
function subStr(str, len) {
str = str.toString();
var newLength = 0;
var newStr = "";
var chineseRegex = /[^\x00-\xff]/g;
var singleChar = "";
var strLength = str.replace(chineseRegex,"**").length;
for(var i = 0;i < strLength;i++) {
singleChar = str.charAt(i).toString();
if(singleChar.match(chineseRegex) != null) {
newLength += 2;
}else {
newLength++;
}
if(newLength > len) {
break;
}
newStr += singleChar;
}
if(strLength > len) {
newStr += "...";
}
return newStr;
}
但發現無意中發現css居然有根據容器寬度自動截取長度加省略號功能，而且無需再次調用js方法去截取字符串。特別在數據比較多的table中，對每行中的列都要調用js方法，會導致頁面加載時間，影響系統性能，導致用戶體驗不夠。但會增加一點服務器流量。可以根據情況衡量使用。
語法：
text-overflow ： clip | ellipsis
取值：
- clip：
- 不顯示省略標記（...），而是簡單的裁切。
- ellipsis：
- 當對象內文本溢出時顯示省略標記（...）
說明：
- 設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。對應的腳本特性為textOverflow。
- text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。
兼容性：
text-overflow : clip
text-overflow : ellipsis
關於text-overflow屬性如何應用，我們作如下的說明講解：
text-overflow:ellipsis;
white-space:nowrap;
width:200px; （標註容器的寬度）
text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。
在Div中的方法
<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很長，表格內一行顯示不下.</NOBR>
<NOBR>就a是比如有一行文字，很長，表格內一行顯示不下.</NOBR>
<NOBR>就1是比如有一行文字，很長，表格內一行顯示不下.</NOBR>
<NOBR>就F是比如有一行文字，很長，表格內一行顯示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>
在Table中的方法
<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</TD>
</TR>
</TABLE>
示例：
<!DOCTYPE html>
<html>
<head>
<title>text-overflow demo</title>
<meta charset=utf-8" />
<style>
.test_demo_clip {
text-overflow:clip;
overflow:hidden;
white-space:nowrap;
width:200px;
background:#ccc;
}
.test_demo_ellipsis {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<h2>text-overflow : clip </h2>
<div class="test_demo_clip">
不顯示省略標記，而是簡單的裁切條
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
當對象內文本溢出時顯示省略標記
</div>
</body>
</html>
演示結果：
css居然有根據容器寬度自動截取長度加省略號功能，強大!!