填充文本填充溢出不影响单词中断
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了填充文本填充溢出不影响单词中断相关的知识，希望对你有一定的参考价值。
单词“under”应该转到下一行，但我认为它不会引起内联填充。
无论如何，当白色填充物接触容器的边缘时，我可以获得文本以打破下一行。
文本需要保持为内联，因为我需要文本行之间的空白区域。如果你有解决方案，需要改变它，结果看起来像我的只有问题是固定的，那也会有效。
附：实际情况下我的容器是100％100％所以宽度，高度不固定的块。
似乎不可能导致内联填充不会以任何方式影响包装，并且完全被忽略。
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;
}<div class="container">
<h1>Heading title</h1>
<br/>
<span class="sub">Some random text under heading title</span>
</div>.sub {
display: block;
background-color: #fff;
font-size: 28px;
padding: 20px 20px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
将显示更改为块/内联块并删除行高。我希望它会有所帮助。
如果不使用JS，您将无法通过CSS获得所需的结果。您当前的代码允许<span>溢出容器的边框（不确定原因），而<h1>标签在容器框边框上完全打破了这个单词。我最好的猜测是在<h1>中包含全文，并使用<h1>的类定义和<span>作为子元素来改变下面元素的line-height和一般样式。
我建议重做你的代码，如下面的例子。
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>如果使用inline-block而不是inline，则会得到所需的行为，但这会导致两行都包含在一个box元素中。
这是一个改变了风格的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;不习惯以某种方式将标题切割成两个相同宽度的元素，它只是确保两个包装元素上的填充是相同的，如果你省略了它，你就不会得到一个填充在右边的第一行并没有第二行左边的填充。
Another idea
您可以使用技巧来获得不涉及任何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;
}
解决方案非常简单。只需要从我的内联元素中删除边填充，添加而不是添加像这样的框阴影
box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
每侧20px。 （与之前使用的填充大小相同）现在内联元素后面的白色bg看起来像容器两侧的溢出（但实际上它只是盒子阴影）。因此，在容器的每一侧添加与盒子阴影的大小相同的填充使其变得完美。
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;
}<div class="container">
<h1>Heading title</h1>
<br/>
<span class="sub">Some random text under heading title</span>
</div>以上是关于填充文本填充溢出不影响单词中断的主要内容，如果未能解决你的问题，请参考以下文章