CSS 设置文本省略 ellipsis (…)

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

  在 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
文章目录
  1. 1. 单行省略
    1. 1.1. 样式代码
    2. 1.2. 代码简析
  2. 2. 多行省略
    1. 2.1. 样式代码
    2. 2.2. 代码简析
  3. 3. 相关链接
|