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

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

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。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 つの方法 (シンプルで使いやすい)

推薦する

IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。

コードをコピーコードは次のとおりです。 <div class="content&qu...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

Pycharm2017はpython3.6とmysqlの接続を実現します

この記事では、pycharm2017でpython3.6とmysqlを接続する方法を参考までに紹介し...

Nginx 502 Bad Gateway エラーの原因と解決策

Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...

Vue要素のバックグラウンド認証プロセスの分析

序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...

MySQLでの少し複雑な使用例コード

序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...

プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...

この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。

目次浅いコピーディープコピー補充する要約するコピー(クローン、複製などとも呼ばれる)ですが、ディープ...

Vueライフサイクルカメラの8つのフック関数

目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...

Linuxドライバのプラットフォームバスの詳細説明

目次1. プラットフォームバスの紹介1.1. Linuxドライバの分離と階層化1.1.1. Linu...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

ページング効果を実装するミニプログラム

この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有し...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...