CSS：换行与不换行

一、CSS 不允许换行

在 CSS 中，有几种方法可以控制文本不换行：

1. 使用 white-space 属性

.no-wrap {
  white-space: nowrap;
}

white-space: nowrap; 会强制文本在一行显示，不换行。

2. 使用 overflow 和 text-overflow

通常与 white-space: nowrap 结合使用：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

3. 使用 display 属性

.inline {
  display: inline; /* 内联元素默认不换行 */
}

4. 使用 flex 布局防止换行

.flex-container {
  display: flex;
  flex-wrap: nowrap; /* 子元素不换行 */
}

注意事项

• 强制不换行可能导致内容溢出容器

• 考虑使用 overflow 属性处理溢出的内容

• 在响应式设计中，可能需要媒体查询来调整小屏幕上的显示方式

二、CSS 允许换行（控制文本换行行为）

在 CSS 中，有几种方法可以控制文本换行：

1. 默认换行行为（允许换行）

.wrap-normal {
  white-space: normal; /* 默认值，允许换行 */
}

2. 只在单词边界处换行

.word-wrap {
  word-wrap: break-word; /* 旧语法，现代浏览器已支持 */
  overflow-wrap: break-word; /* 标准语法 */
}

3. 强制任意位置换行（包括长单词或URL）

.break-all {
  word-break: break-all; /* 可在任意字符间断行 */
}

4. 保留换行符和空格（多行文本）

.preserve-wrap {
  white-space: pre-wrap; /* 保留空格和换行符，但会换行 */
}

5. 使用 flex 布局允许换行

.flex-wrap {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
}

6. 网格布局中的换行控制

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

实际应用示例

/* 允许长单词在必要时换行 */
.article {
  overflow-wrap: break-word;
  hyphens: auto; /* 可选：添加连字符 */
}

/* 多列布局中的换行控制 */
.columns {
  column-width: 200px;
  column-gap: 20px;
}

注意事项

1. word-break: break-all 会破坏单词完整性

2. overflow-wrap: break-word 更语义化，优先考虑使用

3. 对于中文文本，通常不需要特殊处理，因为汉字本身就是独立的语义单元

4. 考虑添加 hyphens: auto 来改善换行后的视觉效果（需要浏览器支持）