CSS 省略号

CSS 省略号是一种常见的页面排版技巧，可以在超出页面宽度或高度的文本范围内自动省略文本内容，以防止文本内容溢出或部分被遮挡。本文将介绍 CSS 省略号属性及相关使用技巧。

text-overflow

text-overflow 属性用于设置如何显示超出文本范围的文本内容，其可选值有：

• clip：隐藏文本并裁剪超出文本范围部分。
• ellipsis：将超出文本范围的文本内容用省略号替代。
• string：将超出文本范围的文本内容用指定字符串替代。

/* 使用 ellipsis 省略号 */
.container {
  width: 200px;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分省略号 */
}

white-space

white-space 属性用于设置元素内的空白如何处理，其可选值有：

• normal：合并多个空白字符，并自动换行。
• nowrap：合并多个空白字符，不允许自动换行。
• pre：保留所有空白字符，不自动换行。
• pre-wrap：保留所有空白字符，允许自动换行。
• pre-line：合并多个空白字符，允许自动换行。

/* 将超出文本范围部分换行 */
.container {
  width: 200px;
  white-space: pre-wrap; /* 允许换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分省略号 */
}

overflow

overflow 属性用于设置元素超出部分如何处理，其可选值有：

• visible：允许元素内容超出容器范围。
• hidden：超出部分将被修剪隐藏。
• scroll：显示滚动条，以便用户滚动查看超出内容。
• auto：当元素内容超出时，显示滚动条，否则不显示滚动条。

/* 显示滚动条 */
.container {
  width: 200px;
  height: 50px;
  overflow: auto; /* 显示滚动条 */
}

示例

以下是一个结合使用 text-overflow、white-space、overflow 属性的示例：

.container {
  width: 300px;
  height: 2em;
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  text-overflow: ellipsis; /* 超出部分省略号 */
}

在该示例中，容器宽度为 300px，高度为 2em，超出部分将被修剪隐藏。white-space 属性设置为 nowrap，禁止文本换行，text-overflow 属性设置为 ellipsis，超出部分显示省略号。

总结

本文介绍了 CSS 省略号的使用技巧及相关属性。通过合理设置 text-overflow、white-space、overflow 属性，可以实现页面排版的多种效果，提升页面的可读性和易用性。