CSS處理文本過長或超出部分（解說一）

在網頁開發中，常常會遇到文本超出了限定的範圍，尤爲是屏幕尺寸的大小致使的，着實影響美觀，這個時候，就須要用css對其進行處理。
下面的方法是我在實際工做中總結出來的，給你們參考一下。

2018-9-11 by yl
這是在實際應用中遇到的一個新的需求，就是指定文本行數，若是超出就用省略號代替
.content{  /*設置文本爲多行，若是超出長度用省略號代替*/
            width: 200px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;  /*限制在一個塊元素顯示的文本的行數*/
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

（1）用省略號代替超出的部分，這個就是高度、寬度都受到限制的時候適用（是我比較喜歡的一種）

text-overflow:clip 修剪文本|ellipsis 顯示省略符號來表明被修剪的文本|string 使用給定的字符串來表明被修剪的文本。

.content {
        width: 80%;
        height: 40px;
        padding: 5px;
        **overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          -moz-text-overflow: ellipsis;
          white-space: nowrap;  /*規定段落中的文本不進行換行*/**
    }

須要將三者結合使用，達到想要的效果：

（2）超出部分換行，在單詞過長，高度不受限制時適用

word-break: normal 默認的|break-all 在單詞內換行|keep-all 只能在半角空格或連字符處換行;

p {
    width: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    **word-break: break-all;**
}

（3）因爲絕對定位或者其餘狀況，致使的標題蓋住連接的，能夠採用flex佈局

.word-secondli {
        display: flex;
        flex-wrap: wrap;/*換行，第一行在上*/
        justify-content: space-between;/*兩端對齊，項目間隔相等*/
        align-items: center;/*居中對齊*/
        border-bottom: 1px solid #ccc;
    }

<div class="word-secondli">
    <h3>在網頁開發中，常常會碰到在一些場景</h3>
    <a href="#">click me</a>
</div>

這樣，標題過長的沒地兒放下連接的時候，連接會自動換行。

以上就是我能想到的方法，若是有什麼不足的地方，歡迎指教。

再補充一條，好比想讓內容在第二行的時候，超出部分隱藏：

            {
            width: 100%;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: -webkit-inline-box;
            }

---

這個處理方式的目前只兼容webkit內核的瀏覽器（其餘方法看法說二）：