blocks|key|120693|text|您可以使用值为clone的box-decoration-break属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120694|box-decoration-break:+clone;+|BOLD|120695|每个长方体片段都是使用指定的边框、填充和边距包装每个片段而独立呈现的。边界半径、边界图像和长方体阴影独立地应用于每个片段。背景在每个片段中独立绘制，这意味着具有background-repeat:+no-repeat的背景图像可以重复多次。-+MDN|blockquote|120696|120697|120698|请参阅caniuse.com上最新的浏览器支持表|120699|120700|​|120701|h1+{
++font-weight:+800;
++font-size:+5em;
++line-height:+1.35em;
++margin-bottom:+40px;
++color:+#fff;
}
h1+span+{+
++background-color:+rgba(0,+0,+0,+0.5);+
++padding:+0+20px;
++-webkit-box-decoration-break:+clone;
++box-decoration-break:+clone;
}|code-block|syntax|javascript|120702|<h1><span>The+quick+brown+fox+jumps+over+the+lazy+dog.</span></h1>|120703|120704|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break|1|http://caniuse.com/#feat=css-boxdecorationbreak^0|7|5|D|K|0|0|S|0|S|0|3E|3|0|0|0|0|3|B|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|H]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|L|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|P|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1V|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1W|8|@]|D|@]|E|$V|W]]|$1|X|3|Y|5|U|7|1X|8|@]|D|@]|E|$V|W]]|$1|Z|3|R|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]]]

<p>You could use <code>box-decoration-break</code> property with value of <code>clone</code>.</p>

<blockquote>
  <p><strong><code>box-decoration-break: clone;</code></strong> Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break">MDN</a></p>
</blockquote>

<p>See the current browser support tables at <a href="http://caniuse.com/#feat=css-boxdecorationbreak">caniuse.com</a></p>

<p><strong><a href="https://jsfiddle.net/et57j0ap/">jsFiddle example</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span { 
  background-color: rgba(0, 0, 0, 0.5); 
  padding: 0 20px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;&lt;span&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;&lt;/h1&gt;</code></pre>
</div>
</div>
</p>


blocks|key|122820|text|Multi-line-padded-text+by+CSS+Tricks拯救|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|122821|HTML|122822|<div+class="padded-multiline">
++<h1>
++++<strong>
++++++How+do+I+add+padding+to+subsequent+lines+of+an+inline+text+element?
++++</strong>
++</h1>
</div>|code-block|syntax|javascript|122823|CSS|122824|.padded-multiline+{+
++line-height:+1.3;+
++padding:+2px+0;+
++border-left:+20px+solid+#c0c;
++width:+400px;
++margin:+20px+auto;
}
.padded-multiline+h1+{+
++background-color:+#c0c;
++padding:+4px+0;
++color:+#fff;+
++display:+inline;
++margin:+0;+
}
.padded-multiline+h1+strong+{+
++position:+relative;
++left:+-10px;+
}|122825|注:感谢CSS+Tricks的帮助，还有很多其他的技巧|122826|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/multi-line-padded-text/|1|https://css-tricks.com/^0|0|M|0|0|0|0|0|0|4|A|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p><a href="https://css-tricks.com/multi-line-padded-text/" rel="noreferrer">Multi-line-padded-text</a> by CSS Tricks to the rescue</p>

<p>The HTML</p>

<pre><code>&lt;div class="padded-multiline"&gt;
  &lt;h1&gt;
    &lt;strong&gt;
      How do I add padding to subsequent lines of an inline text element?
    &lt;/strong&gt;
  &lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<p>The CSS</p>

<pre><code>.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0; 
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline h1 strong { 
  position: relative;
  left: -10px; 
}
</code></pre>

<p>NB: thanks to <a href="https://css-tricks.com" rel="noreferrer">CSS Tricks</a> for this, and so many other tips</p>


blocks|key|2675487|text|通过设置line-height为段落或标签尝试下面的单行语句。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2675488|line-height:+1.3;|code-block|syntax|javascript|2675489|entityMap^0|4|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Try the below single-line statement for paragraph or label by setting <code>line-height</code>.</p>

<pre><code>line-height: 1.3;
</code></pre>


blocks|key|120741|text|有点晚了，但是，您可以使用<p>标记而不是<span>，这将对所有行应用填充。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120742|entityMap^0|D|3|L|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>A bit late to the party, but, you could use a <code>&lt;p&gt;</code> tag instead of a <code>&lt;span&gt;</code>, that will apply the padding to all lines.</p>


blocks|key|2675557|text|您可以将元素更改为display:+block或display:+inline-block，这样就可以在默认display:+inline为自由填充时对其设置填充|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2675558|entityMap^0|9|E|O|L|1I|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>you may just be able to change the element to <code>display: block</code> or <code>display: inline-block</code> so that you can set padding to it as the default <code>display: inline</code> is padding free</p>


<p>I have background color applied to the <code>&lt;span&gt;</code> tag, there is also left and right <code>padding</code> set on it. The problem is: the <code>padding</code> is applied only to the left (beginning) and right (ending) of the <code>&lt;span&gt;</code>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.</p>

<p>How can I apply the left and right <code>padding</code> to the <strong>middle</strong> lines?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;&lt;span&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;&lt;/h1&gt;</code></pre>
</div>
</div>
</p>


How to apply padding to every line in multi-line text?

我有背景色应用到<span>标签，也有左和右padding设置在它上。问题是:当文本在多行中换行时，padding仅应用于<span>的左侧(开始)和右侧(结束)，而不应用于每行的左侧(开始)和右侧(结束)。如何将左padding和右应用于中间线路？​h1 {  font-weight: 800;  font-size...

问如何对多行文本中的每一行应用填充？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对多行文本中的每一行应用填充？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对多行文本中的每一行应用填充？
EN