css span换行

作者：愛火焚城发布日期:2025-11-01 浏览:76

/* 通过设置 span 的 display 属性为 inline-block 或 block，可以让 span 元素换行 */
span {
    display: inline-block; /* 或者使用 block */
    width: 100%; /* 设置宽度以确保内容换行 */
}

/* 或者使用 white-space 属性来控制文本的换行行为 */
span {
    white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
}

解释说明：

display: inline-block; 或 display: block;：默认情况下，<span> 是内联元素（inline），不会自动换行。通过将 display 属性设置为 inline-block 或 block，可以让 <span> 元素在特定条件下换行。
white-space: pre-wrap;：这个属性允许文本在遇到空白符时保留空格和换行符，并且在需要时自动换行。适用于需要保留原始格式但又希望文本在必要时换行的情况。

如果你只需要简单的换行效果，通常使用 display: block; 就足够了。

上一篇：css3渐变

下一篇：css首行缩进2字符怎么设置