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的內容都被隱藏掉了，在第二行結尾處，用‘...’覆蓋了其餘的文字，效果以下圖所示：

這個方法存在的問題是：使用的文字的格式，內容的不一樣，有可能放置的省略號的位置可能不會那麼正好合適，若是有更合理的方式，歡迎留言解答。以下圖所示：