如何为span元素设置高度且避免内部换行？

核心思路是用inline替代inline-block，同时用padding-bottom替代margin-bottom来撑开下划线的间距，结合white-space: nowrap保证单个span内部不拆行，既满足单词级换行，又避免下划线重叠：

修改后的CSS代码：

.pane {
  width: 40em;
  border: 1px solid black;
}

.nested-annotation {
  display: inline; /* 替换inline-block，允许整体在单词边界换行 */
  white-space: nowrap; /* 保证单个span内部内容不拆行 */
  padding-bottom: 2px; /* 用padding替代margin，撑开下划线间距 */
  border-bottom: 1px solid;
  line-height: 1.6; /* 增大行高，避免嵌套span的padding挤压行间距 */
}

.nested-annotation:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid;
}

.underlined-hoe {
  border-bottom-color: #b84040 !important;
}

.underlined-per {
  border-bottom-color: rgb(159, 202, 4) !important;
}

关键逻辑说明 #

• display: inline：让span保持行内元素特性，整个标注块可以和其他文本一起在单词边界自动换行，不会把整个嵌套结构锁成一个不换行的块。
• white-space: nowrap：确保单个span内部的文本不会被拆成两行，满足“span内部不换行”的需求。
• padding-bottom：行内元素的margin-bottom不会影响行高，改用padding-bottom可以给下划线留出足够空间，避免嵌套的下划线互相重叠。
• 增大line-height：防止嵌套span的padding导致行与行之间挤压，保证文本排版的舒适度。

测试后，外层标注块会在合适的单词位置换行，每个span内部的文本保持完整，同时不同颜色的下划线不会重叠，hover效果也能正常生效。

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