Introduction

0. 单行溢出省略与多行溢出省略

单行溢出省略：

Example

多行溢出省略的应用场景：

• 固定区域，内容长短不定

• 响应式布局，内容区域大小可变

Example (My Blog)

实现方式？

↓↓↓

Straight CSS

1. WebKit 实现

Example (WebKit)

​

Pros & Cons

优点: 实现代码简单，效果自然，响应式布局效果好

缺点: 注意单行、padding等bug和不兼容的情况（其实几乎没有）</details>

​

2. Fade-out实现

Example (Fade-out)

​

Pros & Cons

优点: 美观（某些意义上），单/多行兼容，响应式布局有效

缺点: 仍然与padding等格式不兼容</details>

​

Delicate CSS

3. CSS伪元素添加省略号

Example (Ellipsis)

Example 2 (Fade-out + Ellipsis)

​

Pros & Cons

优点: 标准CSS实现，兼容性好，响应式布局有效

缺点: 效果生硬，单行bug</details>

​

4. Float定位实现

Example (Float)

Reference

​

Pros & Cons

优点: 实现巧妙，效果自认，单/多行兼容，响应式布局有效

缺点: 仍然与padding等格式不兼容</details>

​

JS Solutions

5. Clamp.js

Example (Clamp.js)

Demo (Alternative Clamp.js)

​

Pros & Cons

优点: 兼容的情况下，相当于方法1

缺点: 不兼容的情况下，表现错误（或因设置问题）</details>

​

6. ftellipsis.js

Demo (ftellipsis.js)

​

Pros & Cons

优点:据说不需要配置行数，全自动

缺点: 表现不正常，不懂代码不评价</details>

​

Break the Game

7. Backend Solution

Example (简书)

8?. Future CSS

CSS Overflow Module Level 3