css white-space

参考

在 CSS 中，overflow 属性用于控制内容溢出容器时的处理方式，而 white-space 和 word-wrap 或 word-break 属性则用于控制文本的换行行为。如果你希望内容在溢出时换行，可以结合这些属性来实现。

1. white-space 属性

white-space 属性用于控制元素内的空白符如何处理。常用的值有：
– normal: 默认值，空白符会被忽略，文本会自动换行。
– nowrap: 文本不会换行，直到遇到 <br> 标签。
– pre: 保留空白符，文本不会自动换行。
– pre-wrap: 保留空白符，但文本会自动换行。
– pre-line: 合并空白符，但保留换行符，文本会自动换行。

2. word-wrap 和 word-break 属性

• word-wrap: 用于控制长单词或URL的换行行为。常用的值有：
  • normal: 默认值，长单词不会换行。
  • break-word: 长单词会在必要时换行。
• word-break: 用于控制单词的换行行为。常用的值有：
  • normal: 默认值，单词在空格或连字符处换行。
  • break-all: 单词可以在任意字符处换行。
  • keep-all: 主要用于CJK（中文、日文、韩文）文本，不允许单词换行。

示例代码

.container {
  width: 200px; /* 设置容器宽度 */
  border: 1px solid #000; /* 添加边框以便观察 */
  overflow: hidden; /* 溢出内容隐藏 */
  white-space: normal; /* 文本自动换行 */
  word-wrap: break-word; /* 长单词换行 */
  word-break: break-all; /* 单词在任意字符处换行 */
}

解释

• overflow: hidden;：如果内容超出容器，超出的部分会被隐藏。
• white-space: normal;：文本会自动换行。
• word-wrap: break-word;：如果有一个很长的单词或URL，它会在必要时换行。
• word-break: break-all;：单词可以在任意字符处换行，适用于处理长单词或URL。

其他注意事项

• 如果你希望内容在溢出时显示滚动条，可以使用 overflow: auto; 或 overflow: scroll;。
• 如果你希望内容在溢出时显示省略号（...），可以使用 text-overflow: ellipsis;，但需要配合 white-space: nowrap; 和 overflow: hidden; 使用。

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

通过这些属性的组合，你可以灵活地控制文本的换行和溢出行为。