CSS 内容溢出省略显示

内容溢出省略显示的功能都需要满足一个条件： 容器有宽度限制。

1. 单行文本溢出省略

单行溢出省略的实现比较简单，CSS自身支持，且几乎所有浏览器都能支持。

涉及到的CSS属性：

• overflow：规定当内容溢出元素框时发生的事情。
  • visible：默认。溢出内容可视，不被修剪。
  • hidden：溢出内容被隐藏。
  • scroll：始终显示滚动条，溢出部分滚动显示。
  • auto：内容溢出时自动出现滚动条，溢出部分滚动显示。
• text-overflow：规定当文本溢出包含元素时发生的事情。
  • clip：直接修剪文本。
  • ellipsis：显示省略号来代表被修剪的文本。
  • String：（自定义内容）使用给定的字符串来代表被修剪的文本。
• white-space：规定如何处理元素内的空白符。
  • normal：默认。空白会被浏览器忽略。
  • pre：空白会被浏览器保留（类似<pre> 标签）。
  • nowrap：文本不换行，在同一行上继续，直到遇到<br> 标签为止。
  • pre-wrap：保留空白符序列，但是正常地进行换行。
  • pre-line：合并空白符序列，但是保留换行符。

关键代码：

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

实现效果：

缺点：只支持单行文本溢出省略显示。

优点：兼容性好。

2. 多行文本溢出省略

使用 Webkit 的 CSS 扩展属性

CSS 自身并没有特定支持多行文本溢出省略的属性，但 Webkit 有支持的 CSS 扩展属性。

涉及到的属性：

• dislay: -webkit-box：设置元素为弹性伸缩盒子模型显示。
• -webkit-box-orient：规定子元素应该被水平或垂直排列。
  • horizontal：在水平行中从左向右排列子元素。
  • vertical：从上向下排列子元素。
  • inline-axis：沿着行内轴来排列子元素（映射为 horizontal）。
  • block-axis：沿着块轴来排列子元素（映射为 vertical）。
• -webkit-line-clamp：限制在块元素显示的文本行数。它只有在display属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical时才有效果。
  • none：内容显示不被限制。
  • Integer：限制内容显示的行数（必须大于0）。
• overflow。

关键代码：

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

实现效果：

缺点：兼容性差——由于使用的是 Webkit 的 CSS 扩展属性，所以只适用于 Webkit 浏览器及移动端。

优点：支持多行省略。

使用伪元素绝对定位的方式

这种方式也是需要容器有宽度限制，并且还要有高度限制。

关键代码：

.container {
  width： 200px;
  max-height: 100px;
  line-height: 20px;
  overflow: hidden;
  position: relative;
}
.container::after {
  content: '...';
  padding-left: 4px;
  /* 通过背景颜色，遮盖下方的文字 */
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
  position: absolute;
  /* 调整省略号的位置与最后一行内容平齐 */
  bottom: 0px;
  right: 0px;
}

缺点：

1. 繁琐，需要调整伪元素和末行对齐——容器的高度需要和内容的行高成比例，否则将会出现最后一行的内容被隐藏了半行，导致省略号和行不能对齐。
2. 内容没有溢出时，省略号仍旧一直显示，需要通过JS判断来隐藏。

优点：

1. 兼容性好。
2. 可实现多行省略。