フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、右側のテキストのスペースが圧迫されず、左側のテキストが溢れて省略されてしまう。同様に、右側のテキストが長くなると、右側のテキストがいっぱいに表示され、左側のテキストが圧迫されてはみ出し、省略されるような効果が生じます。あまり分かりにくいかもしれませんので、効果の写真を見てみましょう。

1. 右側のテキストの幅は右側のテキストと同じで、デフォルトでは左側が残りのスペースをすべて占めます。

2. 右側のテキストの幅は 1 と同じです。左側のテキストが非常に長く、オーバーフローしています。

3. 左側のテキストは 2 と同じですが、右側のテキストには 2 つの「right」が追加されています。

スタイルは以下の通りです:

.フッター{
  幅: 300ピクセル;
  高さ: 20px;
  ディスプレイ: フレックス;
  オーバーフロー: 非表示;
}
。左 {
  背景: #3cc8b4;
  フレックス: 1 1 自動;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
  最小幅: 50px;
}
。右 {
  背景: #9bc;
  最大幅: 250px;
}
.右省略記号 {
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
}

<div class="footer">
   <div class="left">
     左左左左左左左左左左左左
  </div>
  <div class="right">
    <div class="right-ellipsis">
      右右右右右右右右
    </div>
  </div>
</div>

このコードは、max-width、min-width、および right-ellipsis という div を追加します。以下の効果を実現します。

ニーズに応じてさまざまな効果を実現できます。設計要件の概要: 左側の幅は自動的に拡大し、右側の幅も自動的に拡大し、オーバーフローしたり省略したりすることはできません。左のテキストの長さが制限を超えると、左のテキストはオーバーフローして省略されます。効果は以下のとおりです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL インデックスの設計と最適化の方法

>>:  React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

推薦する

Linux で MySQL パスワードを忘れた場合の解決策

問題は次のとおりです。mysql -uroot -p コマンドを入力しましたが、パスワードを忘れてし...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

Javascript 仮想 DOM の詳細な説明

目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...

Docker コンテナの uid と gid の詳細な理解

デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...

Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

Reactの二次連携を実現する方法

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...