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>