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の基本

Thinkpad VMware に仮想マシンをインストールすると、「このホストは Intel VT-x をサポートしていますが、Intel VT-x は無効になっています」というメッセージが表示される (問題解決)

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

Thinkpad VMware に仮想マシンをインストールすると、「このホストは Intel VT-x をサポートしていますが、Intel VT-x は無効になっています」というメッセージが表示される (問題解決)

MySQL データベースのマスター・スレーブレプリケーションと読み取り/書き込み分離

中国における中国語ドメイン名の人気は新たなクライマックスを迎えた

mysql 解凍パッケージの基本インストールチュートリアル

Javascript の奇妙な点をご存知ですか?

React の 3 つの主要属性における Ref の使用に関する詳細な説明

Linux TTY/PTS の違いの概要

CentOS システムでの JDK のインストールと設定の概要

CSS変数を使用してダークモードを実装するためのサンプルコード

WindowsでのMySQLインストールチュートリアルの詳細な紹介

推薦する

MySQLアラームの詳細な分析と処理

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

SQL ファジークエリレポート: ORA-00909: パラメータの数が無効です。解決策

JSで画面録画機能を作成する

JS ES の新機能、変数分離割り当て

JS オブジェクトコンストラクター Object.freeze

HTMLテキストオーバーフローの2つの一般的な解決策は省略記号を表示することです

リバースプロキシ設定を実装するためのユニバーサルnginxインターフェース

HTTPS の有効化に関する経験の共有

MySQLの整数データ型tinyintの詳細な説明

Linux ソースコードの解析 epoll

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

時系列転位修復ケースを実装するSQL

VueはEChartsを使用して折れ線グラフと円グラフを実装します

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