Html 填充文本填充溢出不影响分词

单词“under”应该放在下一行，但我认为这不会导致内联填充

不管怎样，当白色填充物接触到容器边缘时，我可以让文本中断到下一行

文本需要保持为内联，因为我需要文本行之间的空白。如果您有需要更改的解决方案，并且结果与我的结果相同，则问题得到解决，而这也会起作用

另外，在真实情况下，我的容器是100%100%，因此块的宽度和高度不是固定的

这似乎是不可能的，因为内联填充不会以任何方式影响包装，并且完全被忽略

正文{
背景:#111111；
}
.集装箱{
宽度：338px；
高度：600px；
背景色：#000；
字体系列：Arial；
文本对齐：居中；
}
h1{
字体大小：粗体；
字体大小：48px；
背景色：#fff；
显示：内联；
线高：95px；
盒子装饰破裂：克隆；
-webkit盒装饰中断：克隆；
填充：10px 20px 10px 20px；
}
.sub{
显示：内联；
背景色：#fff；
字号：28px；
填充：20px 20px；
线高：90px；
盒子装饰破裂：克隆；
-webkit盒装饰中断：克隆；
}

标题标题


标题标题下的一些随机文本

如果使用

内联块

而不是

内联块

，则可以获得所需的行为，但这将导致两行都被包装在一个box元素中

这是一个改变了风格的例子，我所改变的是：

.sub {
  display: inline-block; // was "inline"
  background-color: #fff;
  font-size: 28px;
  padding: 20px 20px;
  line-height: 90px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

有关您所面临问题的更多详细信息：

<div class="defined-width-for-heading">
  <span class="sub">Some random text under heading title</span>
</div> 

在给定的示例中，

h1

的宽度由页面上最宽的元素决定，该元素是

容器

。因此，只要标题的宽度超过包装元素的宽度，它就会包装到下一行。你的规则

盒子装饰破裂：克隆

不用于以某种方式将标题剪切为两个相同宽度的元素，它只是确保两个已包装元素上的填充相同，如果省略了它，则第一行的右侧不会有填充，第二行的左侧不会有填充

---

另一个想法 您可以使用不涉及任何JS的技巧来获得所需的结果：

由于标题的环绕位置是由定义宽度的下一个元素定义的，因此可以将标题添加到具有定义宽度的

DIV

中。这将确保标题包装在正确的位置，如中所示。基本上，这就是您需要的代码：

HTML:

<div class="defined-width-for-heading">
  <span class="sub">Some random text under heading title</span>
</div> 

---

将显示更改为块/内联块并删除线高度。我希望这会有所帮助。

如果不使用JS，您将无法仅通过CSS获得所需的结果。 当前代码允许

溢出容器边框（不确定原因），而

标记正好在容器框边框上打断单词。我的最佳猜测是将全文包含在

中，并使用

的类定义，并将

作为子元素来更改

行高

&下面元素的常规样式

我建议像下面的例子那样重做代码

正文{
宽度：100%；
高度：自动；
填充：20px；
背景：#000；
}
.集装箱{
位置：相对位置；
宽度：300px；
保证金：自动；
高度：自动；
背景：#333；
填充：20px；
}
h1{
字号：800；
颜色：#333；
文本对齐：居中；
}
h1 span{
-webkit盒装饰中断：克隆；
盒子装饰破裂：克隆；
}
h1.标题跨度{
填充：10px 20px；
背景色：#fff；
字号：1.5em；
线高：2米；
边缘底部：40px；
}
h1.desc跨度{
填充物：5px10px；
背景色：#ddd；
字号：1em；
线高：1.8em；
边缘底部：20px；
}

长标题标题在这里
敏捷的棕色狐狸跳过了懒狗。

解决方案非常简单。只需要从我的内联元素中删除边填充，添加而不是像这样添加框阴影

box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;

每侧20像素。（与我以前使用的填充大小相同） 现在，内联元素后面的白色bg看起来像是容器两侧的溢出（但实际上只是框阴影）。因此，在容器的每一侧添加与长方体阴影大小相同的填充使其变得完美

正文{
背景:#111111；
}
.集装箱{
宽度：298px；
高度：600px；
背景色：#000；
字体系列：Arial；
文本对齐：居中；
填充：0 20px；
}
h1{
字体大小：粗体；
字体大小：48px；
背景色：#fff；
显示：内联；
线高：95px；
盒子装饰破裂：克隆；
-webkit盒装饰中断：克隆；
填充：10px 0px 10px 0px；
盒影：20px0#fff，-20px0#fff；
}
.sub{
显示：内联；
背景色：#fff；
字号：28px；
填充：20px 0px；
线高：90px；
盒子装饰破裂：克隆；
-webkit盒装饰中断：克隆；
盒影：20px0#fff，-20px0#fff；
}

标题标题


标题标题下的一些随机文本

您希望它看起来怎么样？因为“标题下的标题”在下一行，有一个不同的块。我希望它看起来和我的示例一样，但是当填充超过容器边缘时，单词需要跳转到下一行。如果我没有以你们能理解的方式解释我的问题，我为大家感到抱歉，但我很难解释这个问题。这有点骇人听闻。。。但添加一个左右填充的包装div是否有助于您的情况？谢谢你的建议@zgood，但我已经试过了。包装器和容器仍然完全忽略内联填充。在您的示例中，当我增加填充时，您可以看到所有内容都出现了可怕的错误，并且内联文本偏离中心。它必须是内联的，因为我需要文本具有背景色和行与行之间的间距，更改为内联块会使文本变为内联

box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;