我将背景颜色应用于< span>标签,还有左右填充.问题是:当文本被包裹在几行上时,填充仅应用于< span>的左(开始)和右(结束),而不是每行的左(开始)和右(结束).
如何将左右的填充应用于中间线?
h1 { font-weight: 800; font-size: 5em; line-height: 1.35em; margin-bottom: 40px; color: #fff; } h1 span { background-color: rgba(0,0.5); padding: 0 20px; }
<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>
解决方法
您可以使用具有克隆值的box-decoration-break属性.
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. – 07000
请参阅caniuse.com的当前浏览器支持表
h1 { font-weight: 800; font-size: 5em; line-height: 1.35em; margin-bottom: 40px; color: #fff; } h1 span { background-color: rgba(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。