盒装饰破裂溢出

Question

有框装饰中断和溢出的问题。这是一个解释我的问题的小提琴：https://jsfiddle.net/n56226na/3/

span {
  display: inline;
  padding: 7px 20px;
  background: #000;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
} 

基本上，我需要根据设计将文本装箱，并使用填充。问题在于浏览器调整大小，框总是向右（和页面外）溢出，而左侧由于中心对齐而很好地填充。这是一张图片来说明我的问题：

在一个理想的世界中，跨度将是中心对齐的，带有黑框白色文本，但不会溢出它的父div。不确定这是否可行。欣赏任何想法。

Answer 1

我问similar question并经过一些研究并从其他用户那里获取灵感＆＃39;建议，我找到了可能的解决方案

首先，在this page中，您可以使用许多不同的方法找到一些可能的解决方案。

最好的＆＃34; 实际＆＃34; （浏览器支持在时间上有所不同）是结合引用的＆＃34; Fabien Doiron的盒子阴影方法＆＃34;只需稍加修改即可解决Firefox 32 +的特定行为。

您的updated jsFiddle具有以下特定规则：

span {
    display: inline;
    padding: 7px 0;
    background: #000;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    box-decoration-break: clone;

    box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

我添加了多个box-shadow来模仿横向填充（重置原始填充声明）。

无论如何，有必要添加box-decoration-break: clone;来覆盖默认情况下box-decoration-break: split;的特定Firefox 32+行为。

请注意，我只留下了box-decoration-break: clone;因为只有FireFox才需要。

相反，您（实际上）必须删除模拟指定Chrome变体-webkit-box-decoration-break: clone;，因为它会对窗口调整大小的不需要的水平溢出负责。

因此，由于Chrome需要此属性的供应商前缀，因此仅使用标准语法声明它是一种解决方法，即使在其中也能在IE9 +中正确运行

Answer 2

向父级添加右边距，其宽度与文本的填充相同（在您的情况下为20px）。这样它会更快地触发换行，使你的文字看起来不会溢出。