CSSを使用して単一行のテキストの両端を揃える例

日々の WEB フロントエンド開発では、単一行のテキストが両端で揃えられているという状況によく遭遇します。では、CSS はどのように両端で揃えられているのかということだけでなく、すべてのブラウザとの互換性も必要となります。 ?今回はCSSを使って1行の文字列の両端を揃える例を詳しく紹介します！

p{
    text-align:justify;
    text-align-last:justify;
}

上記の 2 行のコードは、基本的にすべてのブラウザと互換性があり、両端での位置合わせを実現できることは誰もがよく知っています。複数行のテキストでは、このスタイルはテキストの最後の段落を処理しません。

そのため、単行の中国語テキストの場合は、

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

をパッチする必要があります。after セレクターを使用して単一行テキストの最後にコンテンツを追加しますが、これにより p が引き伸ばされてしまいます。高さも設定する必要があります。完全なコードは次のとおりです:

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

このメソッドはすべての主流ブラウザと互換性があり、少なくとも私は使いにくいブラウザに遭遇したことがありません。 after セレクターをサポートしていないブラウザーの場合は、selectivize スクリプトを使用してください。を参照してください。 私のもう一つのブログ

文 字 间 要 有 空 格，不 然 不 管 用

概要:

この記事では、例を使用して、単一行の記事の両端を揃える CSS の実装を詳しく紹介します。私の友人もこれについてよりよく理解できると思います。この取り組みが役立つことを願っています。 ~

関連する推奨事項:

CSS3 で両端揃えを実現するための画像とテキストのコード共有

段落テキストの両端揃えを実現する方法の CSS スタイルの例

CSSはどうするのか両端を揃える方法を詳しく解説

以上がCSSを使用して単一行のテキストの両端を揃える例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。