CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題を引き起こしました。以下でこれを説明しましょう。

1. フレックスファミリー

flex には多くのプロパティがありますが、よく使用されるものは次のとおりです。

。容器 {
  ディスプレイ: フレックス;
}

.コンテナ > .left {
  フレックス: 1;
}

.コンテナ > .right {
  フレックス: 1;
}

これにより、左右均等に分割されたレイアウトを簡単に実現できます。

問題を引き起こす例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <meta http-equiv="X-UA-compatible" content="ie=edge" />
    <title>ドキュメント</title>
    <スタイル>
      div {
        パディング: 5px;
        境界線: 1px 実線 #ccc;
      }

      .効果なし{
        アイテムの位置を中央揃えにします。
        マージン: 100px;
        幅: 200ピクセル;
        色: #999;
      }

      .no-effect > div:first-of-type {
        右マージン: 10px;
      }

      ｐ {
        色: 赤;
      }

      .ラップなし{
        オーバーフロー: 非表示;
        空白: ラップなし;
        テキストオーバーフロー: 省略記号;
      }
    </スタイル>
  </head>
  <本文>
    <div style="display: flex;" class="no-effect">
      <div style="flex: 0 0 80px">私は背が低いです</div>
      <div style="flex: auto">
        <p class="no-wrap">私はとても長いです、冗談ではなく、どこまでも伸びます</p>
      </div>
    </div>
  </本文>
</html>

望む効果：

しかし実際の効果は次の通りです。

なぜこのようなことが起こるのでしょうか?

2. フレックスベースが邪魔になる

flex: autoは実際には 3 つのプロパティのコレクションです。

フレックス成長: 1;
フレックスシュリンク: 1;
flex-basis: 自動;

flex-grow拡大率を示し、 flex-shrink縮小率を示し、 flex-basis余分なスペースを割り当てる前にアイテムが占める主軸スペースを示します。

左の div は拡大も縮小もせず、幅は 80 ピクセルに固定されています。右の div は残りの幅 (200 ピクセル - 80 ピクセル = 120 ピクセル) を自動的に埋めますが、実際の効果は 120 ピクセルをはるかに超えます。これは、flex-basis が auto の場合の計算によるものです。

flex-basis: autoの履歴を見てみましょう:

当初、flex-basis は幅/高さによって決定されていました。
その後、バグ 1032922 が発生し、flex-basis の計算は主軸に沿った幅によって決定されるようになりました。
その後、バグ 1093316 が発生し、幅/高さが再び決定されるようになり、幅/高さを自動的に計算する新しいcontentの概念が登場しました。

したがって、 flex-basis要素のwidthを設定しない場合、 flex-basis: autoの幅は内部contentによって決定され、 max/min-widthによって制限されます。

このように、内部contentが自由な場合、 flex-basis要素の幅はmax/min-widthに依存します。

max-widthのデフォルト値はnone 、 min-widthのデフォルト値は一般的に0ですが、ここではautoになっており、これが「異常」の原因です。

flex-basis要素:

共通要素:

3. 解決策

原因が分かれば、適切な治療法を処方することができます。

まず、もちろん、 width属性を設定できます。 width残りのスペースよりも小さい限り、通常はwidth: 0;この方法では、幅が残りのスペースよりも小さいことが 100% 確実になります。
widthを設定せずにmin-widthを使用して制限する場合も同様です。フレックスアイテムにはmin-width:autoがあるため、残りのスペースよりも小さい値 (通常はmin-width: 0;
オーバーフロー効果を制限するためにoverflow:hiddenを設定することも一貫しています。

3 つの解決策を紹介したので、最初の 2 つがなぜ解決できるのかについて説明しましょう。

1つ目は非常にシンプルです。幅は0に設定されていますが、 flex-basisにより残りのスペースを要素が埋めるようにするため、埋められます。P要素には折り返されない省略記号があるため、通常通り表示されます。

では、2番目はどうでしょうか?

2 番目のケースはより複雑です。min min-width値を auto 以外の値に設定すると、shrink-to-fit アルゴリズムが使用されます。このアルゴリズムの計算メカニズムは次のとおりです。

min(max(推奨最小幅, 使用可能な幅), 推奨幅)

大人向けの言葉に翻訳:

推奨最小幅: 最小幅
利用可能な幅: 利用可能な幅、つまりコンテンツボックスの幅
推奨幅: 推奨幅、明示的な改行を除いて改行が不要な場合の幅

縮小幅 = min(max(最小幅、使用可能な幅)、推奨幅)

計算してみましょう:

最小幅: 0
使用可能な幅: 272px
推奨幅: 200 - 残りはランダムな値 (98px)

計算により、次のようになります。

最大値(0, 272) = 272

最小値(272, 98) = 98

したがって、最終的な幅は残りの 98px になります。手動でmin-width: 110pxを設定すると、オーバーフローを超えていることがわかります。

要約する

CSS は私たちが思っているほど簡単に使えるわけではなく、従うべきルールはありますが、それを見つけるプロセスは少し複雑です... 理解できないものに遭遇した場合は、それがどのように生まれ、何をするのかについて詳しく読むと、解決の考え方が理解できます。

<<: システムメンテナンスページにリダイレクトするように nginx を設定する

>>: このポイントのJavaScriptの基本

CSS フレックスベースのテキストオーバーフロー問題の解決方法

Linuxカーネルのアクセス制御セキュリティを強化する方法

MAC で Mysql5.7.10 のルートパスワードを変更する方法

MySQLの行数カウントに関する簡単な説明

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

Tomcat が設定ファイルを外部に配置するためのソリューション

MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点

Dockerコンテナ監視とログ管理の実装プロセス分析

userdel コマンドを使用して Linux ユーザーを削除する方法の詳細なチュートリアル

ログインスライダー検証を実装するJavaScript

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

推薦する

CentOS7 は rpm パッケージを使用して mysql 5.7.18 をインストールします

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

制限を使用すると、MySQL のページングがどんどん遅くなるのはなぜですか?

W3C チュートリアル (15): W3C SMIL アクティビティ

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

無効と読み取り専用で入力を読み取り専用に設定する

ノードを使用して静的ファイルキャッシュを実装する方法

Node.jsがES6モジュールを処理する方法の詳細な説明

MySQL テーブルにはどのくらいの量のデータを保存できますか?

Spark SQL の 4 つの一般的なデータソースの詳細な説明

LinuxでRPMを使用してmysql5.7.17をインストールする

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

MySql 8.0.11 のインストールプロセスと Navicat とのリンク時に発生する問題の概要

Docker Compose マルチコンテナデプロイメントの実装

Vue3でelement-plusを使用する方法の詳細な説明