另一个想法

Question

Word＆＃34;＆＃34;应该转到下一行，但我认为它不会引起内联填充。

当白色衬垫接触到容器的边缘时，无论如何我都可以让文本突破到下一行。

文本需要保持为内联原因我需要文本行之间的空白区域。如果你有解决方案需要更改它并且结果看起来与我的相同只是问题是固定的，那么也会奏效。

P.S。实际情况下我的容器是100％100％所以宽度，高度不固定块。

似乎不可能导致内联填充不会以任何方式影响换行，并且完全被忽略。

＆＃13;

body {
  background: #111111;
}
.container {
  width: 338px;
  height: 600px;
  background-color: #000;
  font-family: Arial;
  text-align: center;
}
h1 {
  font-weight: bold;
  font-size: 48px;
  background-color: #fff;
  display: inline;
  line-height: 95px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 10px 20px 10px 20px;
}
.sub {
  display: inline;
  background-color: #fff;
  font-size: 28px;
  padding: 20px 20px;
  line-height: 90px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

＆＃13;

<div class="container">
  <h1>Heading title</h1>
  <br/>
  <span class="sub">Some random text under heading title</span>
</div>

＆＃13;

Answer 1

如果使用inline-block而不是inline，则会获得所需的行为，但这会导致两行都包含在一个框元素中。

这里的Fiddle改变了风格，我改变的是：

.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;
}

有关您遇到的问题的更多详细信息：

在您的示例中，h1的宽度取决于您网页上最宽的元素container。因此，只要标题的宽度超过包装元素的宽度，它就会换行到下一行。您的规则box-decoration-break: clone;不会用于以某种方式将标题切割成两个相同宽度的元素，它只是确保两个包装元素上的填充是相同的，如果您省略它，则不会得到填充第一行的右侧，第二行左侧没有填充。

另一个想法

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

由于标题的包装位置由定义宽度的下一个元素定义，因此您可以在具有定义宽度的DIV中添加标题。这将确保标题包装在正确的位置，如this Fiddle中所示。基本上，这就是您需要的代码：

<强> HTML：

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

CSS：

.defined-width-for-heading {
  width: 300px;
}

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

Answer 2

.sub {
  display: block;
  background-color: #fff;
  font-size: 28px;
  padding: 20px 20px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

将显示更改为block / inline-block并删除line-height。我希望它会有所帮助。

Answer 3

如果不使用JS，您将无法通过CSS获得所需的结果。您当前的代码允许<span>溢出容器的边框（不确定原因），而<h1>标记在容器框边框上完全破坏了单词。我最好的猜测是在<h1>中加入全文，并使用<h1>的类定义和<span>作为子元素来更改line-height＆amp;下面元素的一般样式。

我建议重做你的代码，如下例所示。

body {
  width: 100%;
  height: auto;
  padding: 20px;
  background: #000;
}

.container {
  position: relative;
  width: 300px;
  margin: auto;
  height: auto;
  background: #333;
  padding: 20px;
}

h1 {
  font-weight: 800;
  color: #333;
  text-align: center;
}

h1 span { 
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h1.title span{
  padding: 10px 20px;
  background-color: #fff; 
  font-size: 1.5em;
  line-height: 2em;
  margin-bottom: 40px;
}

h1.desc span {
  padding: 5px 10px;
  background-color: #ddd;
  font-size: 1em;
  line-height: 1.8em;
  margin-bottom: 20px;
}

<section class="container">
  <h1 class="title">
    <span>Long heading title here</span>
  </h1>
  
  <h1 class="desc">
    <span>The quick brown fox jumps over the lazy dog.</span>
  </h1>
</section>

正如您在代码段中看到的<span>＆amp; <h1>元素尊重.container边框并且不会溢出它。

Answer 4

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

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

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

JSFiddle here

＆＃13;

body {
  background: #111111;
}
.container {
  width: 298px;
  height: 600px;
  background-color: #000;
  font-family: Arial;
  text-align: center;
  padding: 0 20px;
}
h1 {
  font-weight: bold;
  font-size: 48px;
  background-color: #fff;
  display: inline;
  line-height: 95px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 10px 0px 10px 0px;
  box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
}
.sub {
  display: inline;
  background-color: #fff;
  font-size: 28px;
  padding: 20px 0px;
  line-height: 90px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
}

＆＃13;

<div class="container">
  <h1>Heading title</h1>
  <br/>
  <span class="sub">Some random text under heading title</span>
</div>

＆＃13;

填充文本填充溢出不影响单词中断

4 个答案:

另一个想法