带padding与居中文本的box-decoration-break:clone在iOS上显示异常

我有一个设置了text-align: center;的div父容器，内部包含一个span标签，该span设置了-webkit-box-decoration-break: clone;（含标准属性box-decoration-break: clone;）和padding: 0 10px;。在iOS设备上，这个span会超出父容器的右侧范围；但移除span的padding后，就能正常居中且无溢出，而且padding在其他非iOS设备上都能正常工作。

相关代码 #

CSS代码

div {
  text-align: center;
}

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

HTML代码

<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>

iOS设备显示对比 #

• 无padding时的正常显示：
• 有padding时的溢出效果：

问题原因与修复方案 #

这是iOS Safari对box-decoration-break: clone的排版计算bug——当元素启用该属性后，padding的宽度没有被正确纳入文本换行的总宽度计算，导致最后一行文本的padding直接超出了父容器边界。

推荐几种实用的修复方式：

1. 将span设为inline-block并限制宽度
   把span改成内联块级元素，让浏览器重新计算其尺寸逻辑，同时配合box-sizing确保padding不会撑大元素：

   span {
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
     padding: 0 10px;
     background-color: black;
     color: white;
     display: inline-block;
     max-width: 100%;
     box-sizing: border-box;
   }
   

   这种方式能保留box-decoration-break: clone的断行背景效果，同时解决溢出问题。

2. 把padding转移到父容器
   移除span的padding，给父div添加左右padding，同样能实现类似的视觉效果，还能避开iOS的这个bug：

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

3. iOS专属兼容（备选）
   通过媒体查询针对iOS设备强制文本换行，但这种方式可能影响排版美观，仅作为应急方案：

   @supports (-webkit-touch-callout: none) {
     span {
       word-break: break-all;
     }
   }
   

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