如何在多行跨度中每行文本的开头和结尾添加填充？

在每行文本的开头和结尾添加填充

背景

在此场景中，跨度延伸到带有背景的多行颜色。用户希望在每行末尾有 10px 的填充，但避免手动插入 nbsp 标签。首选 CSS 或 JavaScript 解决方案。

CSS 解决方案

在 IE8 及更高版本的 Chrome、Firefox、Opera 和 Safari 中，以下 CSS 和 HTML 代码提供了创造性的解决方案：

CSS:

#titleContainer { width: 520px }
h3 { margin: 0; font-size: 42px; font-weight: bold; font-family: sans-serif }
h3 .heading { background-color: #000; color: #00a3d0; }
h3 .subhead { background-color: #00a3d0; color: #000; }
div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; }
h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0 }
h3 .indent { position: relative; left: -15px; }
h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15 }

HTML:

<div>

说明

此技术创建多个 div每行都有内边距，左侧有实心边框。在每个 div 中，内联 h3 元素定位文本。副标题向左浮动以删除边框并添加行高。

注意事项

此解决方案很复杂，在某些浏览器中可能会遇到问题。虽然它提供了所需填充的视觉近似值，但它可能并不在所有情况下都是完美的。

以上是如何在多行跨度中每行文本的开头和结尾添加填充？的详细内容。更多信息请关注PHP中文网其他相关文章！