元素拥有独立高度且不强制换行？
" />
通过设置 min-width: fit-content 可解决内联元素（如 ）在保持 inline-block 行内布局的同时避免意外断行，并维持各自高度与下划线分离效果。
通过设置 `min-width: fit-content` 可解决内联元素（如 ``）在保持 `inline-block` 行内布局的同时避免意外断行，并维持各自高度与下划线分离效果。
在 Web 排版中，当需要为嵌套的 <span></span> 添加视觉区分（如不同颜色、高度或下划线）时，常会将其设为 display: inline-block —— 这样既能应用 margin、padding、border-bottom 等块级样式，又可保留在文本流中。但问题随之而来：inline-block 默认会将整个元素视为一个“不可分割的盒子”，一旦内容宽度超出容器剩余空间，浏览器可能在两个嵌套 <span></span> 之间强制换行（如示例中 "weduwe [...] Bouwensz" 被截断），破坏语义连贯性。
关键矛盾在于：
- 去掉
white-space: nowrap→ 解决断行，但子元素可能因换行导致下划线错位或重叠； - 保留
inline-block+nowrap→ 保证单行，却引发跨词断行（非单词边界处折行）； - 移除
display: inline-block→ 下划线坍缩为一条连续线，失去层级区分。
✅ 推荐解法：min-width: fit-content
该声明让 <span></span> 的最小宽度自动适应其内部内容的固有宽度（即包裹文字所需的最窄宽度），而非收缩至零或受父容器挤压。它不改变 inline-block 的定位行为，也不禁用自然换行逻辑，而是确保每个嵌套 <span></span> “尽可能紧凑”，从而大幅降低因宽度估算偏差导致的非预期断行。
.nested-annotation {
display: inline-block;
/* white-space: nowrap; ← 不再需要 */
min-width: fit-content; /* ✅ 核心修复 */
margin-bottom: 2px;
border-bottom: 1px solid;
}⚠️ 注意事项：
-
fit-content在现代浏览器（Chrome 63+、Firefox 63+、Edge 79+、Safari 14.1+）中支持良好；若需兼容旧版 Safari，可用min-width: -webkit-min-content作为前缀补充； - 避免对顶层文本容器（如
.pane）设置white-space: nowrap，否则将全局禁用所有换行； -
margin-bottom仍有效，因此各<span></span>的下划线可清晰分层（如.underlined-hoe与.underlined-per不重叠）； - 若内容含长无空格字符串（如超长 URL），建议额外添加
overflow-wrap: break-word防止横向溢出。
最终效果：文本按单词自然换行，嵌套 <span></span> 各自保持高度与独立下划线，视觉层次清晰，语义完整不割裂。
