CSS 设置文本省略 ellipsis

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

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

单行省略

样式代码

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

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

代码简析

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 浏览器 查看兼容性

样式代码

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

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

代码简析

// 必需的属性
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