如何让单个span标签超出父元素且不影响父宽度（非绝对定位）

可以实现，不需要绝对定位。核心思路是利用inline-block元素的特性，让高亮内容紧跟目标文本，同时不影响父元素的宽度计算。

关键要点 #

• 父元素保持固定宽度，设置overflow: visible（默认值，显式声明更清晰），允许子元素超出边界
• 将高亮内容包裹在inline-block容器中，设置white-space: nowrap确保内容不换行，这样它会紧跟在前面的<strong>to</strong>之后，不会被父元素宽度限制换行
• 前面的文本内容保持inline状态，自然换行，让<strong>to</strong>停在行尾，高亮块直接衔接

完整代码示例 #

HTML

<div class="outter">
  <div class="parent">
    <span>Thank you for your interest <strong>to</strong> </span>
    <span class="overflowing-span">
      <span class='highlight'>Sign up to today's deals</span>
    </span>
  </div>
</div>

CSS

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline-block;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

效果说明 #

前面的文本会在父元素宽度内自然换行，最终<strong>to</strong>会落在第二行的末尾，后面的高亮span会紧跟其后，超出父元素的边界显示，同时父元素的宽度不会被高亮内容撑开。

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