文字换行

处理容器内文本如何断行。

常规换行

.text {
  white-space: normal;
  overflow-wrap: break-word; /* 优先在单词边界断；必要时在单词内断 */
}

中英文混排、长链接场景下，常再补一层：

.text {
  word-break: break-word;
}

overflow-wrap 只管「放不下时要不要拆词」；word-break 会改变断行规则本身。日常优先 overflow-wrap: break-word，不够再加 word-break。

强制任意位置断行

长串无空格字符（如连续英文、数字、URL）需要硬拆时：

.text {
  word-break: break-all;
}

中文一般本身可按字断行；break-all 对英文更激进，可能在单词中间断开。

保留换行符

/* 保留空白与换行，同时允许自动换行 */
.pre-wrap {
  white-space: pre-wrap;
}

/* 保留换行，折叠连续空格 */
.pre-line {
  white-space: pre-line;
}

禁止换行

.text {
  white-space: nowrap;
}

禁止换行后内容通常会溢出，需要另行做省略或滚动/截断处理。