用 display: block 可强制行内元素独占一行，不改变 HTML 语义；white-space: pre-line 仅处理文本内换行符，不影响元素布局；推荐用 flex-direction: column 统一控制子元素垂直排列。
用 display: block 强制文字独占一行
默认情况下，<span></span>、<a></a>、<em></em> 这类行内元素不会换行，哪怕内容很长或后面有其他元素。想让它“自己占一行”，最直接的办法是把它变成块级行为：display: block。
常见错误是加 <br> 或在前后硬塞空 <div>——这污染结构，也不可控。而 <code>display: block 是样式层的事，不改 HTML 语义。
- 适用于任何行内元素，比如
<span class="label">已发布</span>想单独成行展示 - 注意它会自动撑满父容器宽度，如果只想“视觉上换行”但又不想占满，得配合
width或inline-block - 若父容器是 Flex 布局，
display: block仍有效，但可能受flex-wrap影响，需留意
white-space: pre-line 不是换行方案，别误用
看到“换行”就下意识查 white-space？小心掉坑里。white-space: pre-line 只对文本节点里的换行符（\n）起作用，对元素本身是否独占一行毫无影响。
比如你写：<span>第一行\n第二行</span>，加了 white-space: pre-line 确实能显示两行，但这不是“让这个 <span></span> 独占一行”，而是把内部的换行符渲染出来了。
立即学习“前端免费学习笔记（深入）”；
- 如果你的 HTML 里没有
\n，这个属性完全没效果 - 它不会让后续兄弟元素移到下一行，只是处理当前元素内的空白逻辑
- 真正需要“元素级换行”，还是得靠
display或float（不推荐）这类布局控制
用 flex 或 grid 容器控制子元素换行更灵活
如果一整组文字/标签需要逐个独占一行（比如表单项列表、导航菜单），与其给每个元素加 display: block，不如从容器入手。
Flex 布局一句话解决：display: flex; flex-direction: column;；Grid 更精确：display: grid; grid-template-rows: repeat(auto-fit, minmax(1em, auto))); ——但日常够用的是前者。
- 优势：不用改每个子元素样式，响应式时也容易统一调整间距（
gap） - 注意
flex-direction: column后，子元素默认宽度为 0，记得加width: 100%或设align-items: stretch - IE11 对
flex-direction: column支持完好，放心用
避免用 float: left 模拟换行
老方法：给元素加 float: left 再清浮动，看似能让它“顶到新行”，实则埋雷。
问题在于：float 会让元素脱离文档流，后续内容会绕排，除非你手动 clear: both，否则极易错位。而且现代 CSS 已无必要这么干。
- 一旦父容器高度塌陷，整个布局可能错乱，调试成本远高于加一行
display: block -
float在响应式断点中行为不稳定，尤其配合width百分比时 - 所有主流浏览器早已支持
display: block和 Flex，没必要倒退
真正卡住人的地方，往往不是“怎么实现”，而是没分清“内容换行”和“元素换行”——前者看 white-space 和 word-break，后者只看布局模式。盯住你要控制的对象层级，别在文本属性里找布局答案。
