複数行にわたるテキストの各行の先頭と末尾にパディングを追加するにはどうすればよいですか?

テキストの各行の先頭と末尾にパディングを追加します

背景

このシナリオでは、スパンは背景のある複数の行にまたがります。色。ユーザーは各行の末尾に 10 ピクセルのパディングを必要としますが、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 内で、インライン h3 要素がテキストを配置します。小見出しは境界線を削除し、行の高さを追加するために左にフローティングされます。

考慮事項

この解決策は複雑であり、特定のブラウザーでは問題が発生する可能性があります。目的のパディングの視覚的な近似値が得られますが、すべての場合において完璧であるとは限りません。

以上が複数行にわたるテキストの各行の先頭と末尾にパディングを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。