自用笔记：本文属于自用笔记，不做详解，仅供参考。

　　在 CSS 中应用 ellipsis 属性，可显示省略符号(…)来代表被修剪的文本。

See the Pen text-overflow: ellipsis by MOxFIVE (@MOxFIVE) on CodePen.

单行省略

样式代码

1
2

<span>CSS is awesome, especially when you can scroll to see extra text 
instead of just having it overlap other text by default.</span>

1
2
3
4
5
6
7

span {
    display: block;
    width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

代码简析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

text-overflow: ellipsis；
// [必需], 文本溢出时显示省略号(…)

display: block;
// [可选], `ellipsis` 只应用于 `block containers`（块级容器），
// 如果所在 HTML 标签非块级，那需要设置 `display` 属性

white-space: nowrap;
// [必需], 将文本限制在一行内

overflow: hidden;
// [必需], 隐藏溢出的内容
// 可按需要仅设置 `overflow-y` 或 `overflow-x`

width: 14em;
// [可选], 限制容器宽度
// 可使用 `max-width`

多行省略

在指定行数后，才使用省略号代替溢出文本，这可以借助 -webkit-line-clamp 属性实现

• -webkit- 内核属性，不支持 IE 和 Firefox 浏览器 查看兼容性

样式代码

1
2

<p>CSS is awesome, especially when you can scroll to see extra text 
instead of just having it overlap other text by default.</p>

1
2
3
4
5
6
7
8
9

p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 15em;
    line-height: 1.5;
    text-overflow: ellipsis;
    overflow : hidden;
}

代码简析

1
2
3
4
5
6
7
8
9
10

// 必需的属性
display: -webkit-box; // 将元素设为弹性盒模型
-webkit-line-clamp: 2; // 文本最大行数
-webkit-box-orient: vertical; // 模型内元素垂直排列
text-overflow: ellipsis;
overflow : hidden;

// 可选的样式
width: 15em; // 限制容器宽度
line-height: 1.5; // 建议增大行高，避免文字被腰斩

相关链接

1. 多行文本溢出显示省略号(…)全攻略 by 愚人码头 on 2014/09/30: http://www.css88.com/archives/5206
2. Overflow Ellipsis: the text-overflow property by W3C on 2015/07/07: https://www.w3.org/TR/css-ui-3/#text-overflow