如何应用填充到多行文本中的每一行？ [英] How to apply padding to every line in multi-line text?

问题描述

我有背景颜色应用到< span> 标签，还有左和右 padding 在上面。问题是： padding 仅应用于< span>



如何应用左侧和右侧，而不是每行的左（开始）和右（结束） code> padding 到中间行？

  h1 {font-重量：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;}  

 < h1> < / h1>  

解决方案

您可以使用值的 box-decoration-break 克隆。

box-decoration-break：clone; code> 每个框碎片独立渲染指定的边框，填充和边缘包裹每个片段。 border-radius，border-image和box-shadow分别应用于每个片段。在每个片段中独立绘制背景，这意味着具有背景重复：无重复的背景图像可以重复多次。 - MDN




请参阅 caniuse.com 上的当前浏览器支持表格

jsFiddle示例

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

 < h1> ;  

>


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

How can I apply the left and right padding to the middle lines?

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

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

解决方案

You could use box-decoration-break property with value of clone.

box-decoration-break: clone; 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. - MDN

See the current browser support tables at caniuse.com

jsFiddle example

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

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

这篇关于如何应用填充到多行文本中的每一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！