CSS处理文本过长或超出部分（解说二）

解说一中的方法不兼容火狐、IE浏览器，所以解说二会给出通用的css写法。

原理：两个盒子a、b，文字内容放于盒子b，固定盒子a的高度及行高，超出a的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。

        .a{
            width: 300px;
            /*想要显示几行，高度就是行高*倍数*/
            height: 52px;
            line-height: 26px;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        .a::before{
            float: left;
            width: 5px;
            content: '';
        }
        .a::after{
            height: 26px;
            content: "...";
            line-height: 26px;
            width: 3em;/* 省略号宽度 */
            margin-left: -1em;/* 使省略号在文字的最末端 */
            position: relative;
            top: 26px;
            left: 100%;
            background-color: #fff;
        }
        .b{
            float: right;
            margin-left: -5px;
            width: 100%;
            line-height: 26px;
            word-break: break-all;
        }

<div class="a">
    <div class="b">在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，
这个时候，就需要用css对其进行处理。下面的方法是我在实际工作中总结出来的，给大家参考一下。</div>
</div>

超出盒子a的内容都被隐藏掉了，在第二行结尾处，用‘...’覆盖了其他的文字，效果如下图所示：

这个方法存在的问题是：使用的文字的格式，内容的不同，有可能放置的省略号的位置可能不会那么正好合适，如果有更合理的方式，欢迎留言解答。如下图所示：