在頁面重構中，經常需要將過多的內容隱藏而顯示部分。在單行文本中實現非常簡單，但是在多行文本中，則需要根據實際選擇不同的方式。
用CSS實現多行溢出隱藏的代碼非常簡單，但是兼容性也相對較低。
1 display: -webkit-box; 2 display: -moz-box; 3 white-space: pre-wrap; 4 word-wrap: break-word; 5 overflow: hidden; 6 text-overflow: ellipsis; 7 -webkit-box-orient: vertical; 8 -webkit-line-clamp:2; /*顯示行數*/
這不是我們這次需要講解的重點。
這次的關注點在於如何用JS來實現隱藏過多內容，用省略號替換顯示的功能。
1. 一段需要隱藏的文本
1 <body> 2 <div class="common"> 3 <h2>example</h2> 4 <div class = "demo"> 5 <div class="text" id="overflowhidden">吉日兮辰良，穆將愉兮上皇；撫長劍兮玉珥[ěr]，璆[qiú]鏘鳴兮琳琅；瑤席兮玉瑱[zhèn]，盍[hé]將把兮瓊芳；蕙餚蒸兮蘭藉，奠桂酒兮椒漿；揚枹[fú]兮拊[fǔ]鼓，疏緩節兮安歌；陳竽瑟兮浩倡；靈偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮滿堂；五音紛兮繁會，君欣欣兮樂康。浴蘭湯兮沐芳，華采衣兮若英；靈連蜷兮既留，爛昭昭兮未央；謇[jiǎn]將憺[dàn]兮壽宮，與日月兮齊光；龍駕兮帝服，聊翱游兮周章；靈皇皇兮既降，猋[biāo]遠舉兮雲中；覽冀洲兮有余，橫四海兮焉窮；思夫君兮太息，極勞心兮忡忡。吉日兮辰良，穆將愉兮上皇；撫長劍兮玉珥[ěr]，璆[qiú]鏘鳴兮琳琅；瑤席兮玉瑱[zhèn]，盍[hé]將把兮瓊芳；蕙餚蒸兮蘭藉，奠桂酒兮椒漿；揚枹[fú]兮拊[fǔ]鼓，疏緩節兮安歌；陳竽瑟兮浩倡；靈偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮滿堂；五音紛兮繁會，君欣欣兮樂康。浴蘭湯兮沐芳，華采衣兮若英；靈連蜷兮既留，爛昭昭兮未央；謇[jiǎn]將憺[dàn]兮壽宮，與日月兮齊光；龍駕兮帝服，聊翱游兮周章；靈皇皇兮既降，猋[biāo]遠舉兮雲中；覽冀洲兮有余，橫四海兮焉窮；思夫君兮太息，極勞心兮忡忡。吉日兮辰良，穆將愉兮上皇；撫長劍兮玉珥[ěr]，璆[qiú]鏘鳴兮琳琅；瑤席兮玉瑱[zhèn]，盍[hé]將把兮瓊芳；蕙餚蒸兮蘭藉，奠桂酒兮椒漿；揚枹[fú]兮拊[fǔ]鼓，疏緩節兮安歌；陳竽瑟兮浩倡；靈偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮滿堂；五音紛兮繁會，君欣欣兮樂康。浴蘭湯兮沐芳，華采衣兮若英；靈連蜷兮既留，爛昭昭兮未央；謇[jiǎn]將憺[dàn]兮壽宮，與日月兮齊光；龍駕兮帝服，聊翱游兮周章；靈皇皇兮既降，猋[biāo]遠舉兮雲中；覽冀洲兮有余，橫四海兮焉窮；思夫君兮太息，極勞心兮忡忡。吉日兮辰良，穆將愉兮上皇；撫長劍兮玉珥[ěr]，璆[qiú]鏘鳴兮琳琅；瑤席兮玉瑱[zhèn]，盍[hé]將把兮瓊芳；蕙餚蒸兮蘭藉，奠桂酒兮椒漿；揚枹[fú]兮拊[fǔ]鼓，疏緩節兮安歌；陳竽瑟兮浩倡；靈偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮滿堂；五音紛兮繁會，君欣欣兮樂康。浴蘭湯兮沐芳，華采衣兮若英；靈連蜷兮既留，爛昭昭兮未央；謇[jiǎn]將憺[dàn]兮壽宮，與日月兮齊光；龍駕兮帝服，聊翱游兮周章；靈皇皇兮既降，猋[biāo]遠舉兮雲中；覽冀洲兮有余，橫四海兮焉窮；思夫君兮太息，極勞心兮忡忡。吉日兮辰良，穆將愉兮上皇；撫長劍兮玉珥[ěr]，璆[qiú]鏘鳴兮琳琅；瑤席兮玉瑱[zhèn]，盍[hé]將把兮瓊芳；蕙餚蒸兮蘭藉，奠桂酒兮椒漿；揚枹[fú]兮拊[fǔ]鼓，疏緩節兮安歌；陳竽瑟兮浩倡；靈偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮滿堂；五音紛兮繁會，君欣欣兮樂康。浴蘭湯兮沐芳，華采衣兮若英；靈連蜷兮既留，爛昭昭兮未央；謇[jiǎn]將憺[dàn]兮壽宮，與日月兮齊光；龍駕兮帝服，聊翱游兮周章；靈皇皇兮既降，猋[biāo]遠舉兮雲中；覽冀洲兮有余，橫四海兮焉窮；思夫君兮太息，極勞心兮忡忡。</div> 6 </div> 7 </div> 8 <script type="text/javascript" src="js/common.js"></script> 9 </body>
JS調用
1 window.onload = function(){ 2 var text = document.getElementById("overflowhidden"); 3 var str = text.innerHTML; 4 window.onresize = function(){ 5 overflowhidden("overflowhidden",3,str); 6 } 7 overflowhidden("overflowhidden",3,str); 8 }
2. JS處理
JS處理的基本思路是獲取到文本中設置的line-height屬性。在獲取到相關屬性后，根據傳入的顯示行數來計算整個文本的高度。然后根據文本內容撐開的高度是否大於計算得到的文本高度來判斷是否需要溢出處理。
i. 腦抽的做法
1 var overflowhidden = function(id, rows, str){ 2 var text = document.getElementById(id); 3 var style = getCSS(text); 4 var lineHeight = style["line-height"]; //獲取到line-height樣式設置的值 必須要有 5 var at = rows*parseInt(lineHeight); //計算包含文本的div應該有的高度 6 var tempstr = str; //獲取到所有文本 7 text.innerHTML = tempstr; //將所有文本寫入html中 8 var len = tempstr.length; 9 var i = 0; 10 if(text.offsetHeight <= at){ //如果所有文本在寫入html后文本沒有溢出，那不需要做溢出處理 11 /*text.innerHTML = tempstr;*/ 12 } 13 else { //否則 一個一個字符添加寫入 不斷判斷寫入后是否溢出 14 var temp = ""; 15 text.innerHTML = temp; 16 while(text.offsetHeight <= at){ 17 temp = tempstr.substring(0, i+1); 18 i++; 19 text.innerHTML = temp; 20 } 21 var slen = temp.length; 22 tempstr = temp.substring(0, slen-1); 23 len = tempstr.length 24 text.innerHTML = tempstr.substring(0, len-3) +"..."; //替換string后面三個字符 25 text.height = at +"px"; //修改文本高度 為了讓CSS樣式overflow：hidden生效 26 } 27 28 }
實現結果：
效果看起來很友好，如果不考慮跑瘋了的while循環
ii. 沒那么腦抽的做法
var overflowhidden = function(id, rows, str){ var text = document.getElementById(id); var style = getCSS(text); var lineHeight = style["line-height"]; var at = rows*parseInt(lineHeight); var tempstr = str; text.innerHTML = tempstr; var len = tempstr.length; var i = 0; if(text.offsetHeight <= at){ //如果所有文本在寫入html后文本沒有溢出，那不需要做溢出處理 /*text.innerHTML = tempstr;*/ } else { //否則 二分處理需要截斷的文本 var low = 0; var high = len; var middle; while(text.offsetHeight > at){ middle = (low+high)/2; text.innerHTML = tempstr.substring(0,middle); //寫入二分之一的文本內容看是否需要做溢出處理 if(text.offsetHeight < at){ //不需要 則寫入全部內容看是否需要 修改low的值 text.innerHTML = tempstr.substring(0,high); low = middle; } else{ //寫入二分之一的文本內容依舊需要做溢出處理 再對這二分之一的內容的二分之一的部分做判斷 high = middle-1; //修改high值 } } tempstr = tempstr.substring(0, high)+"..."; text.innerHTML = tempstr; if(text.offsetHeight > at){ tempstr = tempstr.substring(0, high-3)+"..."; } text.innerHTML = tempstr; text.height = at +"px"; } }
實現效果：
兩種實現效果的比較：
第一種腦抽式寫法，需要不斷的寫入html不斷的修改，次數較多，但是很好地將設定的行數填充滿。所以實現效果還是蠻好的。
第二種沒那么腦抽式寫法，二分處理文本數據，修改html的次數相對而言較少。但是只能夠滿足設置的行數要求，在最后一行可能會有大面積的空白。
總結：
所以該如何改進？