使用CSS實現元素的文本超出隱藏，通常存在兩種方式。
一種是超出直接隱藏內容，另一種是超出顯示為省略號。
超出隱藏
超出隱藏，只需要為一個有固定寬高設置為overflow:hidden;
單行文本超出顯示為省略號
實現代碼如下：
.text-overflow {
? ? width: 400px;
? ? height: 40px;
? ? line-height: 20px;
? ? /*如下為超出隱藏顯示為省略號的核心代碼*/
? ? overflow: hidden;????/* 內容超出寬度時隱藏超出部分的內容 */
? ? text-overflow: ellipsis;????/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
? ? word-break: keep-all;????/* 不換行 */
? ? white-space: nowrap;????/* 不換行 */
}
多行文本超出顯示為省略號
實現代碼如下：
<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獲取元素的內容，之后使用字符串方法進行截取，截取前49個字符，之后，在這49個字符之后連接一個“...”，最后，將這個截取后的字符串賦值給原來的元素內容即可。
