CSS3 文本效果

CSS 文本效果

CSS 中的高级文本样式

现代 CSS 提供了几种强大的功能，用于控制文本布局和外观，尤其是在处理受限空间或长单词时。

在本章中，你将学习这些重要的文本属性：

• text-overflow: 处理超出其容器的文本。
• overflow-wrap (旧称 word-wrap): 控制长单词如何换行。
• word-break: 为不同语言和场景指定换行规则。

浏览器支持

这些属性在所有现代浏览器中都得到了广泛的支持。下表显示了提供完全支持的大致首个浏览器版本。

属性	Chrome	Edge	Firefox	Safari	Opera
text-overflow	Chrome 1+	Edge 12+	Firefox 7+	Safari 3.1+	Opera 11+
overflow-wrap (word-wrap)	Chrome 1+	Edge 12+	Firefox 3.5+	Safari 2+	Opera 10.5+
word-break	Chrome 1+	Edge 12+	Firefox 15+	Safari 3.1+	Opera 15+

注意：在现代浏览器中，通常不再需要这些属性的供应商前缀（例如 -o- 或 -webkit-）。

CSS text-overflow

text-overflow 属性指定如何向用户表明内容超出了元素的盒子（box）可显示范围。此属性仅在 overflow 设置为 hidden、scroll 或 auto 且 white-space 设置为 nowrap 时生效。

常用值包括：

• clip (默认): 简单地在容器边缘截断文本。
• ellipsis: 渲染省略号（’…’）以指示截断的文本。

clip 示例：

这是一段长文本，无法容纳在盒子中，将被截断。

ellipsis 示例：

这是一段长文本，无法容纳在盒子中，将显示省略号。

CSS 代码示例：

.clipped-text {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: clip;
  padding: 5px;
  margin-bottom: 10px;
}

.ellipsis-text {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
}

实际应用：通常用于 UI 元素，如截断的链接、表格单元格或卡片标题，以保持布局一致性。

你可以在鼠标悬停时通过改变 overflow 或 white-space 属性来显示完整文本，但这有时会导致布局偏移。使用工具提示（通常用 JavaScript 实现）是更常见的方法。

CSS overflow-wrap (旧称 word-wrap)

overflow-wrap 属性指定浏览器是否应在长单词内部断行，如果它们 otherwise 会溢出容器。旧的 word-wrap 属性现在是 overflow-wrap 的别名。

默认行为 (normal): 行只在允许的断点（例如空格或连字符）处断开。一个非常长的单词可能会超出其容器。

这段包含一个非常长的单词：thisisaveryveryveryveryveryverylongword。如果没有 overflow-wrap，它可能会超出盒子。

使用 break-word: 允许不可断开的单词（如长 URL 或没有空格的字符串）在必要时在任意点断开，以防止溢出。

这段包含一个非常长的单词：thisisaveryveryveryveryveryverylongword。使用 break-word 时，长单词将会换行。

CSS 代码示例：

.breakable-text {
  width: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  /* 允许长单词断开以防止溢出 */
  overflow-wrap: break-word;
  /* word-wrap: break-word; 也可用（别名） */
}

实际应用：对于显示用户生成的内容、代码片段或 URL 至关重要，因为这些地方可能出现长而不可断开的字符串。

CSS word-break

word-break 属性指定更精细的换行规则，特别适用于处理 CJK (Chinese, Japanese, Korean) 文本或更激进地控制断点。

• normal (默认): 使用默认的换行规则。
• break-all: 允许在任意两个字符之间断开（CJK 文本除外，它表现得像 word-break: break-word）。这可能有用，但在非 CJK 语言中可能导致断开不自然。
• keep-all: 防止在单词内部断开。主要用于 CJK 文本，在 CJK 文本中通常不希望在字符之间断开。
• break-word: 行为类似于 overflow-wrap: break-word，但在旧版浏览器兼容性方面略有不同。通常，对于防止长单词溢出的特定情况，首选 overflow-wrap。

keep-all 示例（防止在单词内部断开，如果未同时使用 overflow-wrap，仍可能溢出）：

这行将尝试不在单词内部断开。LongWordHere。

break-all 示例（激进地断开）：

如果需要，这行将在任意字符之间断开。

CSS 代码示例：

.keep-words-together {
  /* 主要用于 CJK，防止单词内部断开 */
  word-break: keep-all;
  width: 150px;
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 10px;
}

.break-anywhere {
  /* 如果需要，在任意两个字符之间断开 */
  word-break: break-all;
  width: 150px;
  border: 1px solid #ccc;
  padding: 5px;
}

注意：overflow-wrap 和 word-break 之间的相互作用可能很复杂。主要使用 overflow-wrap: break-word 来防止长单词溢出。使用 word-break 来更具体地控制断开行为，尤其是在处理 CJK 文本或需要激进断开时 (break-all)。

有关更多详细信息，请查阅 MDN Web 文档：

• text-overflow
• overflow-wrap
• word-break

CSS 文本属性总结

这里是所讨论属性的快速参考：

属性	描述
text-overflow	指定如何向用户表明未显示内容（例如，使用 ’…’）。需要 overflow: hidden 和 white-space: nowrap。
overflow-wrap	（旧称 word-wrap）允许长而不可断开的单词断开，如果它们 otherwise 会溢出其容器。
word-break	指定更通用的换行规则，包括字符之间的断开方式。

其他相关属性如 text-align-last、text-emphasis 和 text-justify 也存在，但不太常用或浏览器支持程度不一。重点掌握上述核心属性，以实现可靠的文本控制。