css中实现单行及多行文本溢出显示省略号

最近项目中很多地方有文本溢出显示省略号的需求，今天就来整理一下，怎样用css实现单行/多行文本溢出的功能。

1.单行文本溢出显示

效果如下：

html中的定义：

<p class="signal">css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号</p>

css实现：

.signal {
   width: 300px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

单行文本溢出使用text-overflow:ellipsis属性来实现。

2.多行文本溢出

效果如下：

css实现：

.signal {
   width: 300px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}

多行文本溢出使用了WebKit的CSS扩展属性，该方法只适用于WebKit浏览器及移动端。

3.使用js实现文本溢出显示

效果如下：

html：

<p id="signal" class="signal"></p>

<script type="text/javascript">
   function test() {
     let str = 'css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号';
     str = str.slice(0,8) + '...';

     document.getElementById("signal").innerText = str;
   }

   test();
</script>

使用字符串截取方法slice()，截取一部分字符串显示在文本位置。

js实现文本溢出与css实现文本溢出dom显示比较：

由上图比较可以看出，css实现文本溢出并没有改变dom内容，只是对dom的内容进行显示与隐藏。而js，实现的是对dom内容的改变。