当前位置: CSS > 正文

如何在多行文本中的每一行应用填充？

作者：数据流舞者 | 2022-11-28 15:09:30

踩

html,css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我有背景颜色应用于标签,也有左右padding设置.问题是:当文本被包裹在几行上时,仅应用于每行padding的左(开始)和右(结束),而不是左(开始)和右(结束).

如何将左右两侧padding应用于中间线？

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


The quick brown fox jumps over the lazy dog.





1> Stickers..：
您可以使用box-decoration-break值为的属性clone.


  box-decoration-break: clone;每个盒子片段都是独立呈现的,每个片段都有指定的边框,填充和边距.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;
}

The quick brown fox jumps over the lazy dog.



2> stephenmurdo..：
CSS的多行填充文本技巧拯救

HTML


  
    
      How do I add padding to subsequent lines of an inline text element?
    
  
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/CSS/detail/5669
推荐阅读
CSS是否可以在悬停时仅更改rgba背景颜色的alpha？ 
如何解决《是否可以在悬停时仅更改rgba背景颜色的alpha？》经验，为你挑选了5个好方法。css,hover,css3,background-color,rgba,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,j...
                [详细]
            赞
踩
CSS控制虚线边框行程长度和笔画之间的距离 
如何解决《控制虚线边框行程长度和笔画之间的距离》经验，为你挑选了4个好方法。css,border,css3,css-shapes,firefox,chrome,go,容器,html,https,DevBox,在线流程图,编程,编程问答,程序...
                [详细]
            赞
踩
CSSDiv高度100%格式化问题 
如何解决《Div高度100%格式化问题》经验，为你挑选了1个好方法。html,css3,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开...
                [详细]
            赞
踩
CSSrems是否取代了CSS中的ems？ 
如何解决《rems是否取代了CSS中的ems？》经验，为你挑选了2个好方法。css,css3,jquery,html,safari,chrome,firefox,hive,git,DevBox,在线流程图,编程,编程问答,程序员,开发者工具...
                [详细]
            赞
踩
CSS不支持css3的浏览器有哪些 
不支持css3的浏览器有IE6、IE7、IE8。而chrome、firefox、safari、opera等主流浏览器都支持css3：Firefox、Opera、IE9和IE10支持部分css3；Chrome和Safari完全支持CSS3。c...
                [详细]
            赞
踩
CSS如何创建用css剪掉一块的圆圈 
如何解决《如何创建用css剪掉一块的圆圈》经验，为你挑选了1个好方法。html,css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,...
                [详细]
            赞
踩
CSSWebkit因使用webkit-transition渲染多个文本阴影和框阴影值而窒息 
如何解决《Webkit因使用webkit-transition渲染多个文本阴影和框阴影值而窒息》经验，为你挑选了0个好方法。css,webkit,css3,css-transitions,chrome,safari,go,html,DevB...
                [详细]
            赞
踩
CSS如何将CSS AnimationEnd事件处理程序添加到GWT小部件？ 
如何解决《如何将CSSAnimationEnd事件处理程序添加到GWT小部件？》经验，为你挑选了1个好方法。gwt,javascript-events,css3,css-animations,gwt-2.4,DevBox,在线流程图,编程,...
                [详细]
            赞
踩
CSS如何使iframe可调整大小？ 
如何解决《如何使iframe可调整大小？》经验，为你挑选了4个好方法。css,iframe,css3,resizable,https,firefox,git,jquery,ajax,go,html,javascript,DevBox,在线流...
                [详细]
            赞
踩
CSS当IE6拥有15%的市场份额时,Web开发人员是否应该使用CSS 3？ 
如何解决《当IE6拥有15%的市场份额时,Web开发人员是否应该使用CSS3？》经验，为你挑选了4个好方法。css,internet-explorer,css3,javascript,安全,DevBox,在线流程图,编程,编程问答,程序员,...
                [详细]
            赞
踩
CSS每个过渡属性的不同转换持续时间 
如何解决《每个过渡属性的不同转换持续时间》经验，为你挑选了1个好方法。css,css3,css-transitions,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,...
                [详细]
            赞
踩
CSS如何创建切出的六边形？ 
如何解决《如何创建切出的六边形？》经验，为你挑选了4个好方法。html,css,svg,css3,css-shapes,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开...
                [详细]
            赞
踩
CSS如何给IE提供CSS3支持？ 
如何解决《如何给IE提供CSS3支持？》经验，为你挑选了1个好方法。javascript,css,xhtml,jquery,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix...
                [详细]
            赞
踩
CSSCSS三角形如何工作？ 
如何解决《CSS三角形如何工作？》经验，为你挑选了15个好方法。css,geometry,polygon,css3,css-shapes,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,un...
                [详细]
            赞
踩
CSS如何为同一字体添加多个字体文件？ 
如何解决《如何为同一字体添加多个字体文件？》经验，为你挑选了5个好方法。css,fonts,css3,font-face,chrome,android,https,go,服务器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,...
                [详细]
            赞
踩
CSS在Safari中隐藏textarea调整大小句柄 
如何解决《在Safari中隐藏textarea调整大小句柄》经验，为你挑选了1个好方法。safari,webkit,css3,firefox,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维...
                [详细]
            赞
踩
CSSCSS关键帧动画类似于Stop Motion 
如何解决《CSS关键帧动画类似于StopMotion》经验，为你挑选了1个好方法。css3,css-animations,css,https,go,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解...
                [详细]
            赞
踩
CSS像HTML中的列一样垂直包装 
如何解决《像HTML中的列一样垂直包装》经验，为你挑选了1个好方法。html,css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前...
                [详细]
            赞
踩
CSS在具有相等空间分布的弹性项之间添加分界线 
如何解决《在具有相等空间分布的弹性项之间添加分界线》经验，为你挑选了1个好方法。html,css,css3,flexbox,容器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间...
                [详细]
            赞
踩
CSS媒体查询 - 屏幕高度/设备 
如何解决《媒体查询-屏幕高度/设备》经验，为你挑选了1个好方法。css,css3,hive,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工...
                [详细]
            赞
踩
相关标签