【文本超出显示为省略号】

文本超出显示为省略号

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