フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を自動的に調整できます。しかし、最近、プロジェクトに取り組んでいるときに問題が見つかりました。

li 要素には flex が設定されており、flex: 0 0 33.333% です。子要素のテキストは、flex で定義された幅を超えると自動的に省略されます。

<li>
    <a href="">
        <img src="upload/2022/web/5a1692eeN105a64b4.png" alt=""> 
        <p>Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi</p>
    </a>
</li>
ul{
     ディスプレイ: フレックス;
}
li{
    -webkit-box-flex: 0;
    -msフレックス: 0 0 33.333%;
    フレックス: 0 0 33.333%;
    テキスト配置: 中央;
    パディング: 0 1.333vw;
    -webkit-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
    マージン下部: 2.667vw;
}
リップ{
    フォントサイズ: 3.2vw;
    色: #8F8E94;
    テキストオーバーフロー: 省略記号;
    空白: ラップなし;
}

この時点で、p のテキストは非常に長くなり、一部のデバイスでは非表示にする必要があることがわかります。つまり、テキストは折り返されず、省略記号がマークとして残ります。

ここでは、text-overflow: ellipsis が機能せず、省略記号がまったく表示されないことがわかります。また、nowrap が設定されているため、テキストがコンテンツを拡大し、コンテンツが画面を超えてしまうことがわかります。したがって、この問題を解決する必要があります。

親要素 .li の flex: 0 0 33.33% をキャンセルしようとしましたが、機能しません。

ul コンテナの display: flex をキャンセルしてみると、省略記号が表示されます。

そのため、フレックスレイアウトの問題であると推測され、さらに省略記号によって親要素の幅を制限する必要があるのではないかと推測されます。

親要素 li に width: 100% を設定しようとしても機能しませんが、width: 0 を設定すると機能します。今すぐ:

li{
    フレックス: 0 0 33.333%;
    幅: 0
}

幅が設定されていない場合、li は子ノードによって無限に拡張される可能性があります。したがって、p には常にすべてのテキストを 1 行に表示するのに十分な幅があり、切り捨て効果はトリガーされません。効果をテストする別の方法があります:

li{
    フレックス: 0 0 33.333%;
    オーバーフロー: 非表示;
}

上記の 2 つの方法では、目的の効果が得られます。つまり、li に flex 値を設定すると、親コンテナーの残りの幅が動的に取得され、独自の子要素によって引き伸ばされなくなります。

  • html および body 要素に max-width を設定すると、ページ幅が強制されるようです。
  • body にオーバーフローを設定すると、ページ幅は拡張できませんが、要素の幅は残ります。つまり、要素自体は依然としてオーバーフローします。
  • html と body に max-width と overflow を同時に設定します。ページの幅は max-width に制限されますが、要素自体は依然としてオーバーフローします。
  • .main コンテナに overflow: hidden を設定します。同様に、.main はオーバーフローしませんが、.notice 自体はオーバーフローします。
  • .notice 要素に width または max-width を設定すると、幅は制限されますが、省略記号... が特定の幅で完全に表示されず、2 つのドットだけが表示されることがあります。

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

<<:  HTMLドキュメントタイプの詳細な説明

>>:  弾力性のあるナビゲーション効果を実現するJavaScript

推薦する

MySQL サーバーの接続、切断、および cmd 操作

mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...

Navicat を MySQL に接続するときに発生する 2059 エラーの解決方法

最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

Mac で docker と kubectl の自動補完コマンドを追加する方法

kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...

jQuery ベースのカレンダー効果

この記事では、カレンダー効果を実現するためのjQueryの具体的なコードを例として紹介します。具体的...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

nginx で同時接続リクエストの数を制限する方法

導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

Centos7 に Zabbix3.0 をインストールするための非常に詳細な手順

序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...

Linux でのスケジュールされたタスクと遅延タスクの詳細な説明

で+ 時間 17:23に at> touch /mnt/file{1..9} ##アクションを...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

Linux系でよく使われる運用・保守コマンド(まとめ)

目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...

MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)

Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...

MySQL の挿入およびバッチ ステートメントのいくつかの例の詳細な説明

目次序文1.無視を挿入2. 重複キーの更新時3. を置き換える4.存在しない場合は挿入する5. デー...

MySQLフィールドのデフォルト値を設定する方法

目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...