CSS实现div定位与h4元素最后一个单词位置关联的方法

要让div始终紧贴h4的最后一个单词，核心是让div成为h4文本流的一部分，而非脱离文档流的定位元素。以下是具体实现方法：

方法一：将div嵌入h4文本内部（推荐） #

把div直接放在h4的最后一个单词后方，通过CSS将其设为行内块元素，它会自然跟随文本流，无论文本换多少行，都会紧贴最后一个单词。

HTML结构 #

<h4>这是一段会自动换行的长文本内容 <div class="follow-tag">标签</div></h4>

CSS样式 #

/* 给h4设置固定宽度触发换行，实际可根据需求调整 */
h4 {
  width: 220px;
  line-height: 1.5;
}

.follow-tag {
  /* 行内块元素既保留文本流特性，又能设置块级样式 */
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 0.8em;
}

为什么之前的方法失效？ #

如果之前给h4加position: relative，再给div设置position: absolute; right: 0，这种方式是相对于h4的容器边界定位，而非文本的最后一个位置，所以文本换行后，div只会停在h4第一行的右侧末尾，无法跟随最后一个单词。

替代方案（无法修改HTML结构时） #

如果不能把div嵌入h4内部，可用CSS将h4和div都设为行内元素，再用容器包裹，让它们处于同一文本流：

HTML结构 #

<div class="title-wrapper">
  <h4>这是一段会自动换行的长文本内容</h4>
  <div class="follow-tag">标签</div>
</div>

CSS样式 #

.title-wrapper {
  width: 220px;
}

.title-wrapper h4 {
  display: inline;
  line-height: 1.5;
}

.follow-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 0.8em;
}

这种方式同样能让div跟随h4的最后一个单词，但h4的块级特性会被改变，需根据实际布局调整。

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