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

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をインストールする方法

推薦する

Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。

1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...

HTMLドキュメントタイプの詳細な説明

私のは: <!DOCTYPE html>ブログガーデン: <!DOCTYPE HT...

Unicode の一般的な文字の概要

初期のコンピューターのほとんどは ASCII 文字しか使用できませんでしたが、その後、主要な西洋のア...

静的ページと動的ページの実行メカニズムの説明

1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...

Linux学習におけるmkdirコマンドの詳しい説明

目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...

Ubuntu の Docker で mysql5.6 をインストールする方法

1. mysql5.6をインストールする docker 実行 mysql:5.6すべてのアイテムのダ...

HTMLリンクを書くときは、HTTPリクエストを減らすためにサブフォルダに必ずスラッシュを追加してください。

サブフォルダーの末尾にスラッシュがない場合、2 つの HTTP リクエストが生成され、効率に影響しま...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

HTMLは読み取り専用のテキストボックスを実装しており、コンテンツを変更することはできません。

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

CSSにスティッキー効果を追加する方法

前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...

怖いハロウィーン Linux コマンド

ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...