使用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个字符之后连接一个“...”，最后，将这个截取后的字符串赋值给原来的元素内容即可。
