span是唯一能安全包裹文字中某几个字的无语义行内容器，必须用于局部样式、事件绑定或data属性挂载，不可用于布局控制。
span 是什么，什么时候非用它不可
它就是个纯容器，不带任何语义、不换行、不占块级空间，只用来给文字局部加样式或绑定行为。span 本身不改变布局，但它是唯一能安全包裹「一段文字里某几个字」的 HTML 元素。
常见错误现象：div 套在段落中间导致页面错位；用 p 或 h3 去包单个词，结果多出空白行或字体失控；想给一个链接里的某个词变色，却找不到下手位置。
- 必须用
span的场景：给一句话中特定几个字加颜色、加 class、加data-属性、触发 JS 事件 - 不能用
span的场景：需要换行、需要设宽高、需要 margin/padding 控制整体间距（该用div或其他块级元素） - 和
em/strong的区别：后两者有语义，span没有——搜索引擎、读屏器都不关心它
怎么写才不会被浏览器“吃掉”空格或换行
span 本身是行内元素，它的行为完全遵循 CSS 中的 white-space 和文本流规则。你写的换行、缩进、多个空格，在 HTML 源码里会被浏览器自动合并成一个空格。
常见错误现象：源码里写了 <span>hello</span> <span>world</span>，但两个词紧贴着显示，中间没空格；或者故意换行写了三行 span，结果全挤在一行。
立即学习“前端免费学习笔记（深入）”；
- 保持空格：在两个
span之间手动加空格，比如<span>hello</span> <span>world</span> - 强制保留换行：给外层容器加
white-space: pre-wrap，而不是靠span自己解决 - 避免无意义换行：不要为了“看着整齐”在
span标签之间敲回车——那只会让渲染结果多一个空格
class、style、data-* 这些属性往 span 上加要注意啥
span 是最常被用来挂载前端逻辑的“空白画布”，但乱加属性容易埋坑。
常见错误现象：JS 找不到目标 span，因为 class 拼错了；CSS 样式没生效，因为优先级被其他规则覆盖；data 属性值含空格或引号，导致 HTML 解析失败。
-
class名别用中文或空格，推荐用highlight、temp-id-123这类干净命名 -
style尽量少写，尤其是display: block——这会让span行为失真，不如直接换div -
data-属性值必须用双引号包裹，且不能含未转义的"或，例如 <code>data-info="user: 'alice'"是错的，得写成data-info='user: "alice"'
React/Vue 里还要手写 span 吗
要。框架不会帮你自动补 span，它只负责把 JSX/模板编译成真实 DOM。你在 { } 里拼字符串、做条件渲染、插变量时，如果漏了 span，样式或交互就断了。
常见错误现象：Vue 模板里写 {{ item.name }} <span class="tag">{{ item.type }}</span>，结果 item.name 渲染后没受控；React 中用 map 渲染列表，每个项直接返回字符串，导致无法单独操作某一项。
- JSX 中必须显式写
<span>xxx</span>，不能依赖框架“猜”你要包裹 - 需要动态控制样式时，别用字符串拼
class，用className={clsx('base', { active: flag })}这类工具更稳 - 服务端渲染（SSR）下，
span的 class 如果和服务端不一致，可能触发 hydration mismatch 报错
真正难的不是怎么写 span，而是每次动它之前，得想清楚：这个局部样式/行为，是不是真的只能靠它实现？有没有更语义化、更稳定的方式绕过去？
