通过为 inline-block 的 span 添加 min-width: fit-content，可在保留独立高度、底部边框（模拟下划线）及嵌套结构的前提下，阻止文本在单词中间被强制折行。
通过为 `inline-block` 的 span 添加 `min-width: fit-content`，可在保留独立高度、底部边框（模拟下划线）及嵌套结构的前提下，阻止文本在单词中间被强制折行。
在 Web 排版中，当需要为内联文本片段（如 <span></span>）设置独立高度、底部边框（用于视觉区分或“下划线”效果）并支持嵌套时，常见的做法是将 span 设为 display: inline-block。但此举容易引发一个隐性问题：浏览器可能在单词内部断行（如 Bou-wensz），破坏语义完整性——尤其当容器宽度受限且内容较长时。
你当前的 CSS 中启用了 white-space: nowrap 来防止换行，但它会强制整个 .nested-annotation 块不折行，导致其父容器（.pane）因内容过宽而溢出或撑开布局；若移除它，则默认 white-space: normal 会让 inline-block 元素在空格处自然折行，但此时多个相邻 inline-block 元素的 border-bottom 会因基线对齐和行盒堆叠而视觉上“塌陷”，失去各自独立的下划线效果。
✅ 正确解法是：保留 display: inline-block 和 white-space: normal，同时添加 min-width: fit-content。
.nested-annotation {
display: inline-block;
white-space: normal; /* 允许单词间自然换行 */
min-width: fit-content; /* 关键！确保元素最小宽度 = 其内容固有宽度，避免被压缩导致内部换行 */
margin-bottom: 2px;
border-bottom: 1px solid;
}min-width: fit-content 的作用是：让该 inline-block 元素的最小宽度等于其内容在无约束下的自然宽度（即“收缩至内容宽度”），从而防止浏览器为适应父容器而强行压缩 span 并在单词内折行。它既不阻碍单词间的正常换行（如 “weduwe van wylen…” 可在空格后换行），又确保每个标注块自身保持完整、高度独立、下划线互不重叠。
? 注意事项：
-
fit-content在现代浏览器（Chrome 65+、Firefox 63+、Safari 14.1+、Edge 79+）中已广泛支持；如需兼容更旧版本，可降级使用min-width: max-content（效果相近，但语义略有差异）或 JavaScript 动态计算宽度（不推荐，增加复杂度）。 - 避免滥用
white-space: nowrap—— 它适用于“绝对不可拆分”的短标识（如代码 token），而非长人名或短语。 - 若嵌套层级较深（如
.underlined-per包含在.underlined-hoe内），确保父span未设置overflow: hidden或text-overflow: ellipsis，否则可能截断子元素。
最终效果：文本按单词自然换行，每个标注段落拥有独立高度与清晰下划线，鼠标悬停时仍能精准响应，且嵌套关系在 DOM 与视觉上均保持一致。
