CSSで文字の両端を揃える方法

この記事ではCSSを使って文字の両端を揃える効果を紹介していますが、参考になると思いますので、興味のある方はぜひご覧ください。

css でテキストの両端を揃える方法

text-align といえば、誰もがよく知っているはずです。よく使用します。キーワード left、right、center は、親要素を基準にしてインライン要素の左、右、中央の配置を実現します。もちろん、テキストの両端を配置するために justify も使用します。

#上の図に示すように、両端が左揃えに対して整列されており、視覚的には整然としたように見えます。ただし、最後の行には justify は無効です。通常、このような組版はテキスト全体に対して優れています。最後の行に 2 つの単語しかない場合、両端を揃えたくありません。結局のところ、読みにくいです。テキストは 1 行しかありませんが、1 行のテキストの両端を揃える問題 (以下に示すフォーム項目の効果) を解決するにはどうすればよいでしょうか?

最後の行では justify が無効であるという事実に従って、この行のテキストが最後の行にならないように新しい行を追加できます。

//html<div class="item">
    <span class="label" >{{item.label}}</span>：    <span class="value">{{item.value}}</span></div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

しかし、上記の書き方の方が面倒とも言えます。ここが重要なポイントです。新しく学習した属性 text-align-last について学習しました。この属性は、テキストの段落の内容を定義します。強制的に折り返される前の最後の行の配置規則です。

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

1 番目の実装に比べ、2 番目の実装は非常に単純ですが、この属性には互換性の問題があります。状況に応じて実装方法を決定してください。

(推奨学習: CSS チュートリアル )

以上がCSSで文字の両端を揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。