span默认不换行，但内容随父容器自动折行；它是内联元素，文字在哪断span就在哪断，缩窄容器时仍会正常折行，无法“锁住一行”。
span 默认不换行，但内容会随父容器自动折行
span 是内联元素，本身不强制换行，也不阻止换行。它只是“贴着文字走”——文字在哪断，span 就在哪断；父容器宽度缩小时，里面包裹的 span 文字照样会自动折行，和普通文本没区别。
常见错误现象：<span>这是一段很长的文字</span> 放在窄容器里，结果被切成两行，你以为 span 能“锁住一行”，其实不能。
- 想让
span内文字坚决不折行？加white-space: nowrap - 想让它保留源码里的换行和空格？用
white-space: pre或pre-wrap - 想控制换行位置但又不破坏语义？别硬塞
span，该用<br>就用<br>
white-space 属性怎么选：nowrap / pre-wrap / pre-line 的实际差异
直接写在 span 上的 white-space 值，决定了它怎么对待空格、制表符和换行符，也影响是否自动折行：
-
white-space: nowrap：忽略所有换行符，空格只留一个，且禁止自动折行——内容超宽就溢出或滚动 -
white-space: pre-wrap：保留源码换行和空格，同时允许在单词边界处自动折行（最常用，兼顾可读与适应性） -
white-space: pre-line：合并连续空格为一个，但保留换行符，且允许自动折行（适合从后端带 \n 的纯文本渲染）
注意：pre 会保留所有空白并禁用自动折行，容易撑破容器，一般不用在 span 上，更适合 <pre class="brush:php;toolbar:false;"></pre> 标签。
为什么给 span 加 margin/padding 不会触发换行
span 是内联元素，它的 margin 对上下无效，padding 虽然能生效，但不会“推走”邻近文字来制造换行——它只是把文字往外撑，行高不变，周围文本照常流动。
常见错误现象：给 span 加了 padding: 5px，结果背景色是贴着文字的，整行还是连在一起；想靠它分隔两段文字，发现根本没空隙。
- 真要制造视觉分隔，用
display: inline-block - 需要上下间距？改父容器的
line-height或用块级元素 - 想让某个
span独占一行？直接设display: block，但它就不再是语义纯粹的内联容器了
br 标签和 span 搭配使用的边界情况
<br> 是唯一能在内联流中强制换行的 HTML 元素，但它必须出现在文本流里——放在 span 外面有效，放在里面也有效，但要注意嵌套层级。
常见错误现象：<span>第一行<br>第二行</span> 渲染正常；但若 span 上有 white-space: nowrap，<br> 仍会生效——这是少数能穿透 nowrap 的换行方式。
-
<br>不是样式，是语义化换行符，搜索引擎和读屏器会识别它 - 不要用多个
<br><br>模拟段落间距，该用margin-top就用 CSS - 后端返回带 \n 的字符串时，前端用
replace(/\n/g, '<br>')插入，比靠white-space更可控
真正难的不是让文字换行，而是判断该由谁负责换行：是数据本身（\n）、HTML 结构（<br>）、CSS 规则（white-space），还是布局容器（width + 自动折行）。混用时容易互相覆盖，建议优先明确换行意图再选手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
