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

推薦する

フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント

目次関連する依存関係のインストールドッカーDockerでJenkinsをインストールするDocker...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

MySQLテーブルにタイムスタンプを追加するいくつかの方法

シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...

Vue で配列をクリアするいくつかの方法 (要約)

目次1. はじめに2. データを消去するいくつかの方法2.1 ref() の使用2.2 スライスの使...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

MySQL で乱数を生成し、文字列を連結する方法の例

この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...

数字当てゲームを実装するための純粋なJavaScript

100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推...

Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

MySQL トランザクション分離レベルを表示する mysql> '%isolation...

MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル

インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

JavaScript 関数呼び出しの典型的なサンプルコード

目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...

VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...