CSS 换行处理

—

由

SUIAO
于

不允许换行

使用 white-space 属性

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

使用 overflow 和 text-overflow

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

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

使用 display 属性

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

使用 flex 布局

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

注意事项

  • 强制不换行可能导致内容溢出容器。
  • 考虑使用 overflow 属性处理溢出的内容。
  • 在响应式设计中，可能需要媒体查询来调整小屏幕上的显示方式。

允许换行

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

默认换行行为

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

在单词边界处换行

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

强制任意位置换行

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

保留换行符和空格

用于多行文本

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

flex 布局换行

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

网格布局换行控制

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

注意事项

  • word-break: break-all 会破坏单词完整性。
  • overflow-wrap: break-word 更语义化，优先考虑使用。
  • 对于中文文本，通常不需要特殊处理，因为汉字本身就是独立的语义单元。
  • 考虑添加 hyphens: auto 来改善换行后的视觉效果（需要浏览器支持）。
文章目录
    ↑