使用position:absolute时Span文本样式异常，如何修复？

差异原因 #

1. 元素显示类型改变：position:absolute会把原本的行内元素<span>转为块级元素，此时整个文本被包裹在单一的块容器中，box-decoration-break: clone无法生效——这个属性的作用是让行内元素跨行时，每行的背景、边框、阴影等装饰独立渲染，而块级元素不存在跨行的行内框，自然触发不了该效果。
2. 定位与宽度逻辑不同：position:absolute的元素若没有最近的非static定位父元素，会相对于视口定位；即便设置width:100%，它仍是完整的块，文本换行后属于块内部内容，不会拆分出独立的行内装饰框。而position:relative不会改变<span>的行内特性，文本自然换行后每行形成独立行内框，box-decoration-break: clone就能正常工作，实现每行带背景的效果。

修复方案 #

要让position:absolute实现预期的跨行装饰效果，需保持元素的行内特性，并设置正确的定位上下文：

步骤1：添加父级定位容器 #

给<span>的父元素设置position:relative，让absolute定位的元素相对于父容器定位，避免偏移到视口。

步骤2：修改元素显示类型 #

给.text设置display: inline-block（或display: inline），配合max-width:100%限制宽度，让元素保持行内换行的特性，触发box-decoration-break: clone的效果。

修复后代码示例 #

CSS

/* 父容器提供定位上下文 */
.text-container {
  position: relative;
  width: 100%; /* 可根据需求调整容器宽度 */
}

.text {
  position: absolute;
  display: inline-block;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 0 0 1px white;
  line-height: 145%;
  padding: 0.2em 0.3em;
  color: white;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-color: rgba(0, 0, 0, .9);
  border-radius: 3px;
  white-space: pre-wrap;
  font-size: 1.125rem;
}

HTML

<div class="text-container">
  <span class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
</div>

补充说明 #

若不需要额外父容器，也可直接给.text设置display: inline，但添加父容器能让布局更可控，避免元素偏移到预期外位置。

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