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

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。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 を応援していただければ幸いです。