如何在多行跨度中每行文字的開頭和結尾添加填充？

在每行文本的開頭和結尾添加填充

背景

在此場景中，跨度延伸到帶有背景的多行顏色。使用者希望在每行末尾有 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中文網其他相關文章！