CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇することがよくあります。このように、text-align スタイルと text-justify スタイルを使用する必要があります。

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

auto : ブラウザのユーザーエージェントが使用の正当性を判断できるようにします。
単語間: 単語間にスペースを追加してテキストを揃えます。この動作は、すべてのテキスト行を揃える最も速い方法です。段落の最後の行では、位置揃えの動作は機能しません。
新聞: 単語または文字間のスペースを拡大または縮小してテキストを揃えます。ラテンアルファベットを揃える最も正確な形式です
配布: 新聞のようなスペースを扱う
distributor-all-lines: 行をdistributeと同じ方法で揃えますが、揃えられた2つの段落の最後の行も除外します。表意文字文書に適用可能
inter-ideograph : 表意文字テキストの完全な位置揃えを提供します。彼は表意文字と単語の間のスペースを増やしたり減らしたりする

しかし、これは元々 text-overflow、overflow-x などの IE のプライベート機能として実装されたもので、FF では非常に遅い段階まで実装されませんでした。つまり、厳密な互換性の問題があります。さらに、FF と Chrome では、この機能を有効にするために、中国語の文字の間にスペースまたはソフト改行を手動で挿入する必要があり、Chrome で発生する抵抗はさらに大きくなります。翻訳する

プラン：

.テスト1 {
          テキスト配置:両端揃え;
          テキストの両端揃え:すべての行を均等に分配;/*ie6-8*/
          テキスト配置最後:両端揃え;/* ie9*/
          -moz-text-align-last:justify;/*ff*/
          -webkit-text-align-last:justify;/*chrome 20+*/
      }
      @media screen および (-webkit-min-device-pixel-ratio:0){/* chrome*/
          .test1:後{
              コンテンツ："。";
              表示: インラインブロック;
              幅:100%;
              オーバーフロー:非表示;
              高さ:0;
          }
      }

コードを実行します:

<!DOCTYPE HTML>
    <html>
        <ヘッド>
            <title>テキストの配置</title>
            <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
            <スタイル>
                .box1{
                    背景:赤;
                    幅:30%;
                }
                .テスト1 {
                    テキスト配置:両端揃え;
                    テキストの両端揃え:すべての行を均等に分配;/*ie6-8*/
                    テキスト配置最後:両端揃え;/* ie9*/
                    -moz-text-align-last:justify;/*ff*/
                    -webkit-text-align-last:justify;/*chrome 20+*/
                }
                @media screen および (-webkit-min-device-pixel-ratio:0){/* chrome*/
                    .test1:後{
                        コンテンツ："。";
                        表示: インラインブロック;
                        幅:100%;
                        オーバーフロー:非表示;
                        高さ:0;
                    }
                }
            </スタイル>
        </head>
        <本文>
            <div class="box1">
                <div class="test1">名前</div>
                <div class="test1">名前 名前</div>
                <div class="test1">名前</div>
                <div class="test1">場所</div>
                <div class="test1">職場</div>
            </div>
        </本文>
    </html>

要約する

上記はエディターが導入した CSS テキスト配置の実装コードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: IE イメージツールバーを無効にする

>>: VirtualBoxにOpenSuseをインストールする方法