盒子装饰破溢出答案

【问题标题】：Box decoration break overflow盒子装饰破溢出
【发布时间】：2015-07-14 22:54:36
【问题描述】：

box-decoration-break 和溢出的问题。这是一个小提琴来说明我的问题：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;
}

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

在理想情况下，span 将居中对齐，带有黑框白色文本，但不会溢出它的父 div。不确定这是否可能。欣赏任何想法。

【问题讨论】：

标签： css overflow

【解决方案1】：

我问了similar question，经过一些研究并从其他用户的建议中汲取灵感，我找到了可能的解决方案。

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

“实际上”（浏览器支持随时间而变化）的最佳方法是将引用的“Fabien Doiron 的 box-shadow 方法”结合一点修改以仅解决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+ 中也能正常运行

【讨论】：

【解决方案2】：

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

【讨论】：