CSS实现标记词上方span垂直堆叠不重叠且行高自适应

标签重叠的核心原因是所有分类标签都设置了position: absolute和固定top: -11px，绝对定位元素会脱离正常文档流，既不会占据页面布局空间，也不会被父元素计算高度，多个标签定位到同一坐标时就会互相遮挡。之前单独调整flex、position属性不生效，是因为没有从根本上改变标签脱离文档流的状态。

将标签和被标记词语的包裹容器设置为行内弹性盒，采用垂直方向排列，让标签留在正常文档流中自然堆叠，即可实现标签逐行展示、容器高度随标签数量自动适配的效果，不需要手动计算偏移值。

修正后可直接运行的代码 #

<style>
/* 标签+词语的包裹容器 */
.tag-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  line-height: 1.2;
  vertical-align: bottom;
}
/* 分类标签通用样式 */
.tag-label {
  font-size: 0.7em;
  line-height: 1.5;
  padding: 0 5px;
  font-style: italic;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}
/* 被标记词语通用样式 */
.tagged-word {
  padding: 0 4px;
  cursor: pointer;
  color: rgb(0, 0, 0);
}
</style>

<div dir="auto" style="line-height: 2.5;">
  <span data-start_offset="0" data-end="41" style="white-space: break-spaces;">Metaphysics continues asking "why" where </span>
  <span class="tag-wrapper">
    <span class="tag-label" style="background-color: rgb(173, 164, 189);">class1</span>
    <span class="tag-label" style="background-color: rgb(173, 164, 189);">class2</span>
    <mark id="06aabd50-2b2a-4b45-bb5a-311630c7b2e8" class="tagged-word" style="background: rgb(173, 164, 189);">science</mark>
  </span>
  <span data-start_offset="48" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based of fundamental physics is based of fundamental physics is based</span>
  <span class="tag-wrapper">
    <span class="tag-label" style="background-color: rgb(231, 131, 210);">class3</span>
    <span class="tag-label" style="background-color: rgb(231, 131, 210);">class4</span>
    <mark id="977c207e-92ca-4176-af01-0b6b01afe578" class="tagged-word" style="background: rgb(231, 131, 210);">theory</mark>
  </span>
  <span data-start_offset="84" data-end="194" style="white-space: break-spaces;"> of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.</span>
</div>

关键调整说明 #

• 移除所有标签的position: absolute、固定top、left属性，让标签回归正常文档流，从根源上解决同坐标重叠问题
• 包裹容器设置为inline-flex+flex-direction: column，既可以和周边行内文本保持同行排列，内部标签、词语也会自动从上到下垂直堆叠
• 容器高度完全由内部内容（标签+词语）撑开，后续增减标签数量不需要手动调整行高、偏移值，自动适配
• 保留原有视觉效果和交互属性：标签背景色、长文本省略号、词语鼠标手型、选中高亮效果均和原设计一致
• 给容器加vertical-align: bottom，避免带标签的词语和周边普通文本出现垂直对齐错位问题

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