多行文本截断并出现省略号 纯CSS解决方案

2016/4/18

ps:博主上班半个月啦 一直在忙 万事开头难。。
前几天碰到一个CSS的问题 多行文本的截断 还不能使用JS来做 找了又找 终于发现国外有个非常好的想法来跟大家分享一下，具体网站忘记了。。。如果有记得的 发给我一下 ，毕竟是人家的创意。。。
如下图：

---

大家都知道，text-overflow是实现单行文本溢出隐藏的方式

    overflow: hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*文本溢出省略号*/
    white-space: nowrap;/*不换行*/

通过上述代码再加上对宽度的设定，可以实现 如：

这样的标题单行隐藏，看上去不错~

---

在网上可以查找到一些方式来进行多行隐藏的处理，如：http://www.css88.com/archives/5206
这里面写了几种方式，其中对webkit内核的浏览器的处理方式可以学习一下。
今天介绍的方案更取巧一些，兼容性也会更好一些。
废话不说了，上代码
html代码

    <div class="wrap">
       <div class="prop"></div>
       <div class="main">
    我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤我叫王大锤
       </div>
       <div class="end"><div class="realend">...</div></div>
    </div>

CSS代码

        /********多行文本的省略问题  350px********/
        .wrap {
            width: 350px;
            height: 200px;
            line-height: 25px;
            overflow:hidden;
            margin-right:-70px;
        }
        .prop {
            float: left;
            width: 1px;
            height: 200px;
            background: transparent;
        }
        .main {
            float: right;
            width: 349px;
        }
        .end {
            float: right;
            position: relative;
            width: 1px;
            background: #FFA;
        }
        .realend {
            position: absolute;
            width: 27px;
            top: -23px;
            left: 323px;
            background: #fff;
            font-size: 13px;
        }

这样一写，不用任何js，直接就可以实现多行文本省略的问题了。如果仅仅需要解决问题，后续讲解不用看了。。T-T

原理分析

大家都知道浮动，三个不同大小的div浮动起来，应该是这样的：

如果div2的高度变大的话，三个div的位置应该是这样的

OK 重点来了 如果 我们有个包含 “……” 的div 是相对于div3 做的绝对定位 那么情况是这样的：

当div2的高度变大，那么情况如下：

这就是一个多行文本省略取巧的纯CSS解决方案。

实在忘记是哪个国外的网站了，不过这个idea 非常好 感谢大家观看~~。