css兼容大部分浏览器的文本超出部分显示省略号

css之字体多行省略（兼容大部分浏览器）

字体单行显示省略号

  <style>
        .box1{
            width: 500px;
            height: 1.5em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <div class="box1">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>

字体多行显示省略号

文本框盒子定义了宽高之后，设置它的右边距一个字符的宽度，用来显示省略号。设置文本框的盒子伪类before来显示省略号。使用绝对定位让它在右下角。

当然，它会一直显示在右下角，然后可以使用伪类after来遮住省略号，因为after是行内元素，它会跟着在文本的末端，设置它宽高为一个字符，当文本超出的的时候它会被超出部分隐藏。文本没有超出的时候，设置让它绝对定位，当字体没有超出文本盒子，它就会遮住省略号，当然after的背景色要与文本盒子的背景色一致！

<style>
        .box{
            position: relative;
            width: 100%;
            height: 3em;    /* 高度是行高的几倍就是几行显示省略号 */
            line-height: 1.5em;
            font-size: 20px;
            overflow: hidden;
            padding-right: 1em;
            box-sizing: border-box;
            word-break: break-all;
            background-color: white;
        }
        .box:before{
            content: '...';
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .box:after{
            position: absolute;
            content: "";
            margin-top: 0.5em;
            right: 0;
            width: 1em;
            height: 1em;
            background-color: white; //文本框的背景色一致
        }
    </style>
    <div class="box">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>