默认不换行因其为行内元素，需用 display: block 或 flex 布局实现换行与对齐，避免 \n/ 硬换行以保障可访问性与语义正确性。
HTML <label></label> 默认不换行，怎么让它换行
<label></label> 是行内元素，天生不会自动换行——哪怕里面文本很长，或者你写了
，浏览器也当看不见。这不是 bug，是标准行为。
常见错误现象：在表单里写 <label>用户名：
请输入真实姓名</label>，结果两行挤成一行；或者加了 white-space: pre 但父容器没设宽，还是不生效。
- 最稳的方式是给
<label></label>加display: block或display: inline-block（后者适合需要和旁边元素对齐的场景） - 如果 label 里有
<input>，且你想让文字和输入框分上下两行，直接对<label></label>设display: block，再给内部<input>加display: block或用margin-top拉开距离 - 别依赖
<br>塞进<label></label>里——语义不对，可访问性差，屏幕阅读器可能跳过换行
label.textContent 和 label.innerHTML 换行处理差异
JS 动态设置 label 文本时，textContent 会把
当纯字符，不渲染为换行；innerHTML 能识别 <br>，但引入 HTML 字符串有 XSS 风险，尤其内容来自用户输入。
使用场景：表单动态生成、错误提示插入、国际化文案切换。
立即学习“前端免费学习笔记（深入）”；
- 安全又可控的做法：用
textContent+ CSS 控制换行，比如white-space: pre-line，这样 - 如果必须用
innerHTML插<br>，先对用户数据做textContent转义（例如document.createTextNode(str).textContent），再手动替换<br> - 注意：
white-space: pre-line在 IE11 中支持，但某些老安卓 WebView 可能表现不一致，测试时务必覆盖目标环境
用 CSS 实现 label 内部多行对齐（如标题+副说明）
单纯换行不够，经常要让“用户名”顶左、“（必填）”右对齐，或两行文字垂直居中对齐输入框。这时候不能只靠 display: block。
参数差异：flex 布局比 float 更可靠，但需注意 <label></label> 默认不设高度，align-items: center 可能无效。
- 推荐结构：
<label><span class="label-main">用户名</span><span class="label-hint">（必填）</span></label>，再用 flex 控制两 span 排列 - 若 label 包着
<input>，建议把 input 单独提出来，label 只管文字，避免嵌套导致样式穿透或 focus 行为异常 - 性能影响小，但过度嵌套
<span></span>会影响可访问性标签关联，确保for和id正确配对
React/Vue 中 label 换行容易被忽略的点
框架里常把 label 写成 JSX 或 template，看着像 HTML，但实际渲染逻辑不同。比如 Vue 的 v-html 渲染 <br> 是 OK 的，但 React 的 dangerouslySetInnerHTML 就得格外小心。
常见错误现象：Vue 中写 <label>{{ labelText }}</label>，text 含
，结果不换行；React 中用 {labelText} 直接插字符串，
被忽略。
- Vue：给 label 加
white-space: pre-line，然后labelText = '第一行 第二行'即可 - React：不要用
dangerouslySetInnerHTML处理简单换行，改用labelText.split(' ').map((line, i) => <div key="{i}">{line}</div>) - 兼容性坑：SSR 场景下，服务端渲染的
真正麻烦的不是怎么换行，而是换行后 label 和 input 的 focus 状态、键盘导航顺序、屏幕阅读器播报是否还连贯——这些一不留神就掉进可访问性坑里。
