CSS はテキストの両端揃えの効果をどのように実現しますか

両端でのテキスト配置の効果を実現するには、CSS の text-align プロパティを使用できます。text-align: justify; を設定して、テキストの配置効果を実現します。

方法 1 : text-align: justify; text-align-last: justify; を設定し、 ie ブラウザと互換性のある要素に text-justify:distribute-all-line; を

p{

            幅: 130ピクセル;

            text-align: 両端揃え;

            text-align-last: 両端揃え;

            /*兼容ie*/

            text-justify: 全行を配布;

        }

方法 2 : text-align を設定し、疑似要素の after または before スタイルを設定します。Width:100% または padding-left:100% を疑似要素に追加して、必要な効果を実現できます。

p {

           幅: 200ピクセル;

            高さ: 30ピクセル;

            text-align: 両端揃え;

        }

p::after {

            コンテンツ： "";

            表示: インラインブロック;

            /* パディング左: 100%; */

            幅: 100%;

        }

注: text-align-last: justify; は中国語の文字でのみ機能しますが、数字と英語の文字はスペースで区切る必要があり、テキストの位置合わせを行うには、上記の 2 つの方法のいずれかを使用します。