ホームページ > ウェブフロントエンド > CSSチュートリアル > 複数行にわたるテキストの各行の先頭と末尾にパディングを追加するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-07 17:15:03
オリジナル
383 人が閲覧しました

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:

<div>
ログイン後にコピー

説明

この手法は、各行の左側にパディングと実線の境界線が付いています。各 div 内で、インライン h3 要素がテキストを配置します。小見出しは境界線を削除し、行の高さを追加するために左にフローティングされます。

考慮事項

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート