css 换行

作者：我在坚强也需要有人疼发布日期:2025-11-17 浏览:105

/* 示例代码：使用 CSS 实现换行 */

/* 方法 1: 使用 white-space 属性 */
.text-wrap {
    white-space: pre-line; /* 保留空白符序列，但是正常地进行换行 */
}

/* 方法 2: 使用 word-break 属性 */
.break-word {
    word-break: break-all; /* 强制文本在任意字符处换行 */
}

/* 方法 3: 使用 overflow-wrap 属性 */
.wrap-text {
    overflow-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
}

解释说明：

white-space: pre-line;
这个属性会保留源代码中的空白符（如空格、换行符），但在显示时会将多个空白符合并为一个，并且会在需要的地方自动换行。适合用于处理包含换行符的文本。
word-break: break-all;
这个属性会在任何字符处强制换行，即使是一个单词内部。适合用于处理长单词或 URL 地址，防止它们超出容器宽度。
overflow-wrap: break-word;
这个属性会在单词过长无法适应容器宽度时，在单词内部进行换行。它不会像 word-break: break-all; 那样随意换行，而是尽量保持单词完整性，只有在必要时才换行。

上一篇：css display

下一篇：css 动画