Introduction
0. 單行溢出省略與多行溢出省略
單行溢出省略：
多行溢出省略的應(yīng)用場(chǎng)景：
固定區(qū)域，內(nèi)容長(zhǎng)短不定
響應(yīng)式布局蒋畜，內(nèi)容區(qū)域大小可變
實(shí)現(xiàn)方式？
↓↓↓
Straight CSS
1. WebKit 實(shí)現(xiàn)
?
Pros & Cons
優(yōu)點(diǎn): 實(shí)現(xiàn)代碼簡(jiǎn)單插龄，效果自然佣渴，響應(yīng)式布局效果好
缺點(diǎn): 注意單行、padding等bug和不兼容的情況（其實(shí)幾乎沒(méi)有）</details>
?
2. Fade-out實(shí)現(xiàn)
?
Pros & Cons
優(yōu)點(diǎn): 美觀（某些意義上）膨处，單/多行兼容，響應(yīng)式布局有效
缺點(diǎn): 仍然與padding等格式不兼容</details>
?
Delicate CSS
3. CSS偽元素添加省略號(hào)
Example 2 (Fade-out + Ellipsis)
?
Pros & Cons
優(yōu)點(diǎn): 標(biāo)準(zhǔn)CSS實(shí)現(xiàn)真椿，兼容性好，響應(yīng)式布局有效
缺點(diǎn): 效果生硬测摔，單行bug</details>
?
4. Float定位實(shí)現(xiàn)
?
Pros & Cons
優(yōu)點(diǎn): 實(shí)現(xiàn)巧妙解恰，效果自認(rèn)，單/多行兼容护盈，響應(yīng)式布局有效
缺點(diǎn): 仍然與padding等格式不兼容</details>
?
JS Solutions
5. Clamp.js
?
Pros & Cons
優(yōu)點(diǎn): 兼容的情況下腐宋，相當(dāng)于方法1
缺點(diǎn): 不兼容的情況下，表現(xiàn)錯(cuò)誤（或因設(shè)置問(wèn)題）</details>
?
6. ftellipsis.js
?
Pros & Cons
優(yōu)點(diǎn):據(jù)說(shuō)不需要配置行數(shù)胸竞，全自動(dòng)
缺點(diǎn): 表現(xiàn)不正常，不懂代碼不評(píng)價(jià)</details>
?
