複数行にわたるテキストの各行の先頭と末尾にパディングを追加するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-07 17:15:03

オリジナル

410 人が閲覧しました

How to Add Padding to the Beginning and End of Each Line of Text in a Multi-Line Span?

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

背景

このシナリオでは、スパンは背景のある複数の行にまたがります。色。ユーザーは各行の末尾に 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: