モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を自動的に調整できます。しかし、最近、プロジェクトに取り組んでいるときに問題が見つかりました。 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 値を設定すると、親コンテナーの残りの幅が動的に取得され、独自の子要素によって引き伸ばされなくなります。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: 弾力性のあるナビゲーション効果を実現するJavaScript
mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...
最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...
この記事では、カレンダー効果を実現するためのjQueryの具体的なコードを例として紹介します。具体的...
目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...
テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...
序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...
で+ 時間 17:23に at> touch /mnt/file{1..9} ##アクションを...
基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...
目次序文1.無視を挿入2. 重複キーの更新時3. を置き換える4.存在しない場合は挿入する5. デー...
目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...