使用CSS實(shí)現(xiàn)元素的文本超出隱藏，通常存在兩種方式。
一種是超出直接隱藏內(nèi)容邀层，另一種是超出顯示為省略號(hào)。
超出隱藏
超出隱藏遂庄，只需要為一個(gè)有固定寬高設(shè)置為overflow:hidden;
單行文本超出顯示為省略號(hào)
實(shí)現(xiàn)代碼如下：
.text-overflow {
? ? width: 400px;
? ? height: 40px;
? ? line-height: 20px;
? ? /*如下為超出隱藏顯示為省略號(hào)的核心代碼*/
? ? overflow: hidden;????/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
? ? text-overflow: ellipsis;????/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) 寥院；需與overflow:hidden;一起使用。*/
? ? word-break: keep-all;????/* 不換行 */
? ? white-space: nowrap;????/* 不換行 */
}
多行文本超出顯示為省略號(hào)
實(shí)現(xiàn)代碼如下：
<style>
.text-overflow {
? ? width: 400px;
? ? line-height: 20px;
}
</style>
? ? <div class="text-overflow" id="con"></div>
<script>
? ? var con = document.getElementById('con');
? ? var textCon = con.innerHTML;
? ? con.innerHTML = textCon.substring(0, 49) + '…';
</script>
基本原理很簡單：通過innerHTML獲取元素的內(nèi)容涛目，之后使用字符串方法進(jìn)行截取秸谢，截取前49個(gè)字符，之后霹肝，在這49個(gè)字符之后連接一個(gè)“...”估蹄，最后，將這個(gè)截取后的字符串賦值給原來的元素內(nèi)容即可沫换。
