CSS スタイルを使用して段落テキストの両端を揃える方法の例-CSSチュートリアル-php.cn

CSS スタイルを使用して段落テキストの両端を揃える方法の例

黄舟

リリース： 2017-07-19 15:58:53

オリジナル

3082 人が閲覧しました

ウェブサイトには多くのテキストがある場合がありますが、親要素の幅が設定されていても、両端は常に不均一になり、不均一に見えます。実際、段落の両端を揃えるには、2 つの CSS

スタイルを設定するだけで済みます。

.demo{
       text-align: justify;
       text-justify: inter-ideograph;/*IE*/
}

ログイン後にコピー

テキスト両端揃えの基本構文

構文:

text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph

ログイン後にコピー

パラメータ:
auto : ブラウザーのユーザーエージェントが使用される両端を決定できるようにします整列ルール;
単語間のスペースを広げてテキストを整列します。この動作は、テキストのすべての行を整列させる最も速い方法です。
新聞の最後の行には無効です。 : 単語または文字間のスペースを増減してテキストを整列させることは、ラテン文字の両端を整列させるために使用される最も正確な形式です。
分散: スペースを新聞と同様に処理し、東アジアの文書、特にタイに適しています。 distribution-all-lines: 行の両端を整列させる方法は、distribute と同じであり、整列された 2 つの段落の最後の行も含まれません。
inter-ideograph: 完全に提供されます。表意文字テキストの場合は 2 行で終了します。彼は表意文字や単語間のスペースを追加または削除します。
コードは次のとおりです:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>css实现段落文字两端对齐</title>
    <style>
        *{margin:0;padding:0;}
        .demo{
            width: 300px;
            height: 200px;
            margin: 20px auto;
            font-size: 14px;
            color: #0a78fa;
            text-align:justify;
            text-justify:inter-ideograph;/*IE*/
            border: 1px solid #fa5275;
        }
    </style></head><body><p class="demo">
    川剧流行于四川全境和云南贵州等省部分地区，是融汇高腔、昆曲、胡琴(即皮黄)、弹戏(即梆子)和四川民间灯戏五种声腔艺术而成的剧种。
    川剧，是中国汉族戏曲剧种之一，流行于四川东中部、重庆及贵州、云南部分地区。川剧脸谱，是川剧表演艺术中重要的组成部分，
    是历代川剧艺人共同创造并传承下来的艺术瑰宝。川剧由昆曲、高腔、胡琴、弹戏、灯调五种声腔组成。</p></body></html>

ログイン後にコピー

効果は次のとおりです:

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