抛弃js实现单行多行的文本省略号

前言
在做项目的过程中经常会碰到一些文本的不固定性，需要将溢出的文本隐藏。
这时候就要出现省略号提示文本溢出，还有更多内容，如果直接砍掉就很容易
让人误会是没有有文字，或是什么原因造成文字显示不全。

单行的可以直接用ellipsis来处理，但是旧版本的火狐会出现直接砍断不支持的情况(新版本已经支持)。

新版火狐下测试

单行文本溢出省略

单行溢出的主要代码：

white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;

代码解释：因为是单行的溢出省略，所以到一行的尾部的时候不能换行，换行就不是隐藏了。
之后再把溢出的部分隐藏起来，最后再用省略号代替。

多行文本溢出省略

多行溢出也可以用纯CSS来写，不过要用到一些新的元素，这个自然会导致兼容性上的问题。

先看下面代码：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

本着能使用CSS就不用JS的原则，这边自然不会就这样放弃其它不兼容的浏览器，也不会用js来代替。

先看代码：
html

<div class="multiline2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ad consequatur odit
    tempora alias corporis illo quae omnis porro ut maxime iste in doloribus ducimus cumque
    quibusdam veritatis enim accusantium.
    <span class="mask"></span>
    <span class="dot">...</span>
</div>

css

.multiline2{
    position: relative;
    margin: 10px;
    width:300px;
    padding: 0 10px;
    max-height: 60px;
    line-height: 20px;
    border: 2px solid #026873;
    word-break: break-all;
    display: inline-block;
    overflow: hidden;
}
.multiline2 .mask{
    position: relative;
    z-index: 10;/*借用绝对定位将遮盖层提高*/
    float: right;
    height: 60px;
    width: 20px;
    background-color: #fff;
}
.multiline2 .dot{
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 20px;
    display: inline-block;
    vertical-align: bottom;
    background-color: #fff;
}

效果图

多行溢出

原理解释：

这个主要是利用一个模块将省略号遮盖住，然后通过文字挤压推移此模块，等溢出的时候，该模块移开被遮住的省略号，这样就形成了多行省略的效果。

虽然多了两个标签，但是省去了js的使用。

查看例子
大家可以自己运行调试其原理。