CSS と JavaScript でテキスト行の末尾にパディングを追加する方法

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

テキストの特定の行にパディングが必要な場合は、さまざまなデザイン シナリオで発生する可能性があります。この場合、ユーザーは、span 要素の各行の末尾に 10 ピクセルのパディングを希望します。

CSS アプローチ:

提供された 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;
}

このソリューションは印象的ですが、課題がないわけではなく、すべてのブラウザーに推奨されるわけではありません。 。ただし、これは CSS テクニックの柔軟性を示しています。

JS ソリューション:

より簡単なアプローチとして、JavaScript を使用して改行を見つけ、非改行を追加できます。必要に応じてスペースを入れてください。

以上がCSS と JavaScript でテキスト行の末尾にパディングを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。