CSSで文字の両端を揃えるコード例を解説-CSSチュートリアル-php.cn

CSSで文字の両端を揃えるコード例を解説

不言

リリース： 2018-11-12 15:40:40

転載

2597 人が閲覧しました

この記事の内容は、テキストの両端揃えを実現するための CSS のコード例を説明するものです。必要な方は参考にしていただければ幸いです。

フォームを作成する際、名前や携帯電話番号、出身地などの項目の上下を揃えるという場面によく遭遇します。このようにして、text-align スタイルと text-justify スタイルを使用します。

text-align を直接両端揃えに設定するだけです。text-justify の状況は複雑なので、慣れていない人もいるかもしれません。 IE の値は次のとおりです。

auto: ブラウザユーザーエージェントが使用する配置ルールを決定できるようにします。

inter-word: 単語の間にスペースを追加してテキストを配置します。この動作は、テキストのすべての行を揃える最も速い方法です。両端揃えの動作は、段落の最終行には影響しません。

newspaper : 単語または文字間のスペースを増減してテキストを配置します。ラテンアルファベットを両端揃えするための最も正確な形式です

distribute: 新聞と同じようにスペースを処理します

distribute-all-lines:distribute と同じ方法で行を配置します。また、最後の行も除外します整列した 2 つの段落。表意文字ドキュメントに適用されます

inter-ideograph : 表意文字テキストの完全な位置揃えを提供します。表意文字と単語の間のスペースを増減します。

しかし、これは text-overflow や overflow-x などの IE のプライベート実装として最初に実装され、FF では非常に後期になってから実装されました。言い換えれば、厳密な互換性の問題があります。また、FF と Chrome では、有効にするには漢字の間に空白スペースまたはソフト改行を手動で挿入する必要があります。Chrome で遭遇する抵抗はさらに大きくなります。 p>

計画:

.test1 {
      text-align:justify;
      text-justify:distribute-all-lines;/*ie6-8*/
      text-align-last:justify;/* ie9*/
      -moz-text-align-last:justify;/*ff*/
      -webkit-text-align-last:justify;/*chrome 20+*/
  }
  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
      .test1:after{
          content:".";
          display: inline-block;
          width:100%;
          overflow:hidden;
          height:0;
      }
  }
  
  运行代码：
  


<!DOCTYPE HTML>
<html>
    <head>
        <title>文本两端对齐 </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   
        <style>
    
            .box1{
                background:red;
                width:30%;
            }
            .test1 {
                text-align:justify;
                text-justify:distribute-all-lines;/*ie6-8*/
                text-align-last:justify;/* ie9*/
                -moz-text-align-last:justify;/*ff*/
                -webkit-text-align-last:justify;/*chrome 20+*/
            }
            @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
                .test1:after{
                    content:".";
                    display: inline-block;
                    width:100%;
                    overflow:hidden;
                    height:0;
                }
            }
        </style>

    </head>
    <body>
        <div class="box1">
            <div class="test1">姓 名</div>
            <div class="test1">姓 名 姓 名</div>
            <div class="test1">姓 名 名</div>
            <div class="test1">所 在 地</div>
            <div class="test1">工 作 单 位</div>
        </div>
    </body>
</html>

ログイン後にコピー

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