CSS文本单行多行省略（笔记）

1. 单行文本省略

在网页设计中，当文本内容过长超出容器宽度时，为了保持页面的整洁和美观，常常需要对超出部分进行省略。下面是一些常用的方法来实现单行文本的省略。

1.1 使用CSS属性text-overflow

.single-line {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

1.2 使用CSS属性overflow与position

.single-line {
  width: 200px; /* 容器宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  position: relative; /* 相对定位 */
}

.single-line:after {
  content: "..."; /* 添加省略号 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 确保省略号在底部显示 */
  right: 0; /* 确保省略号在右侧显示 */
  padding-left: 5px; /* 添加一定的间距 */
  background-color: white; /* 避免省略号被覆盖 */
}

2. 多行文本省略

与单行省略不同，多行文本省略需要使用CSS属性-webkit-line-clamp来实现。

.multi-line {
  width: 200px; /* 容器宽度 */
  display: -webkit-box; /* 使用flex布局 */
  -webkit-line-clamp: 3; /* 最多显示三行 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

需要注意的是，-webkit-line-clamp只在支持WebKit内核的浏览器中生效（例如Chrome、Safari等），并且需要配合-webkit-box-orient属性使用。

3. 总结

通过以上方法，我们可以根据需求在网页设计中实现单行或多行文本的省略效果。单行文本通常可以使用text-overflow: ellipsis属性或添加省略号元素的方式来实现，而多行文本省略则需使用-webkit-line-clamp属性配合-webkit-box-orient属性来实现。根据具体情况选择合适的方法，能有效地提升用户体验和页面整洁度。

本文来自极简博客，作者：神秘剑客，转载请注明原文链接：CSS文本单行多行省略（笔记）