CSS如何实现指定位置断行，禁止inline-block子元素前换行？

问题根源 #

原代码出现span单独换行的核心原因，是display: inline-block的span属于CSS行内排版规则定义的原子行内级盒子：

• 浏览器会自动在这类原子行内盒子的前后位置生成隐含的合法换行断点，哪怕相邻内容之间没有空格、连字符这类常规断点字符也不例外。当容器宽度不足时，浏览器就会把承载“2021”的span单独拆分到下一行。
• 尝试将span改为display: inline确实可以消除这类隐含断点——普通非原子的行内盒子不会在边界生成隐含换行点，会和相邻文本绑定为连续的内容流，但此时如果继续使用transform: translateY(-70px)做垂直偏移，会因为普通非可替换的inline元素不属于CSS规范定义的可变换元素范围，导致偏移效果完全失效。

最简实现方案 #

不需要额外嵌套任何容器，也不需要修改原有HTML结构，仅调整span的CSS规则即可同时满足断行和垂直偏移的要求，改动后的CSS如下：

div {
  font-size: 130px;
  display: inline-block;
}

div span {
  font-size: 30px;
  position: relative;
  top: -70px;
}

原有HTML保持不变：

<div>My Text<span>&nbsp;2021</span></div>

方案逻辑说明 #

• 移除display: inline-block后，span回到默认的普通inline状态，不再是原子行内盒子，因此和前面的“Text”文本之间不会生成隐含换行断点。结合span开头的 不换行空格，“Text”和“2021”会被绑定为不可拆分的连续内容，唯一的合法换行点是“My”和“Text”之间的常规空格，完全匹配断行规则要求。
• 使用position: relative + top: -70px替代原来的transform做垂直偏移：这类定位偏移对普通inline元素完全生效，视觉上和原来的translateY(-70px)没有任何差异，不需要重新调试对齐数值，迁移成本为零。
• 相比嵌套一层专门设置white-space: nowrap的容器方案，这个实现不会增加额外DOM节点，代码更简洁，维护成本更低。

内容的提问来源于stack exchange，提问作者Anna_B