css竟然有根據容器寬度自動截取長度加省略號功能，強大!!

時間 2019-11-11

原文原文鏈接

參考學習：http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.htmlcss

項目中最初的作法（js截取）：html

//字符長度截取包括中英文混合 
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;
      overflow:hidden;
       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> spa

示例：code

<!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>