具有填充和文本居中的框装饰中断克隆在 iOS 上无法正常工作

Question

我有一个带有

text-align: center;

的父容器，里面有一个带有

-webkit-box-decoration-break: clone;

和

padding: 0 10px;

的跨度。

在 iOS 上，span 在父容器的右侧溢出。我看到当我从 span 中删除

padding

时，它不会溢出并且可以正常工作。

但是跨度中的填充在任何其他设备上都能正常工作。

div {
  text-align: center;
}

span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 10px;
  background-color: black;
  color: white;
}

<div>
  <span>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Est eveniet, porro eius odio doloremque assumenda similique eaque saepe quae voluptatibus quod, ratione temporibus qui, fugit repellat incidunt veritatis. Sapiente, ducimus?
  </span>
</div>

这里是 iPhone 的屏幕截图，在跨度中没有填充：

这里是 iPhone 的屏幕截图，其中填充在 span 中并且溢出了：