モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整できます。非常に便利で、ますます欠かせないものになっています。しかし、最近、プロジェクトに取り組んでいるときに問題を発見しました。 つまり、flex:1 が設定されたコンテナーでは、テキストが非常に長い場合、テキストは設定された動的な残りのスペースに留まらず、コンテナーを超えてしまいます。実際のプロジェクトは非常に複雑なので説明するのは難しいので、ここでは問題を次のように簡略化します。 基本的に、フレックス レイアウトのメイン コンテナー、左側に固定の幅と高さのロゴ、右側に動的な幅のコンテンツがあります。 <div class="main"> <img alt="" class="logo" src="pic.jpg"> <div class="content"> <h4 class="name">名前</h4> <p class="info">情報</p> <p class="notice">これは通知コンテンツです。</p> </div> </div> 。主要 { ディスプレイ: フレックス; } .ロゴ { 幅: 100ピクセル; 高さ: 100px; マージン: 10px; } 。コンテンツ { フレックス: 1; } .コンテンツ > * { 空白: ラップなし; オーバーフロー: 非表示; テキストオーバーフロー: 省略記号; } .notice は非常に長くなる可能性があり、一部のデバイスでは非表示にする必要があります。つまり、折り返されず、省略記号... がマークとして残ります。 ここでは、text-overflow: ellipsis が機能せず、省略記号がまったく表示されないことがわかります。また、nowrap が設定されているため、テキストがコンテンツを拡大し、コンテンツが画面を超えてしまうことがわかります。したがって、この問題を解決する必要があります。 親要素 .content の flex: 1 をキャンセルしようとしましたが、機能しませんでした。 そのため、フレックスレイアウトの問題であると推測され、さらに省略記号によって親要素の幅を制限する必要があるのではないかと推測されます。 親要素 .content に width: 100% を設定しようとしても機能しませんが、width: 0 を設定すると機能します。今すぐ: 。コンテンツ { フレックス: 1; 幅: 0; } 幅が設定されていない場合、.content は子ノードによって無限に拡張される可能性があります。そのため、.notice には常にすべてのテキストを 1 行に表示するのに十分な幅があり、切り捨て効果はトリガーされません。効果をテストする別の方法があります: 。コンテンツ { フレックス: 1; オーバーフロー: 非表示; } 上記の 2 つの方法では、目的の効果が得られます。つまり、コンテンツが flex 1 に設定されている場合、親コンテナーの残りの幅が動的に取得され、独自の子要素によって引き伸ばされることはありません。 テストの結果、次のメソッドは無効です。 html および body 要素に max-width を設定すると、ページ幅が強制されるようです。 フレックスレイアウトでコンテナ内にコンテンツを保持する方法についての記事はこれで終わりです。フレックスレイアウトでコンテナ内にコンテンツを保持する方法の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: ORM モデル フレームワークを使用して MySQL データベースを操作する方法
>>: vue-cropper を使用して vue で写真をトリミングする方法をご存知ですか?
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...
目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...
まとめプロジェクトの説明形式<img src="..."> H2+ ...
npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...
1. シャドウソックスをインストールするsudo apt-get install python-pi...
昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
1. 概要information_schema データベースは performance_schema...
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...
1. よく使われるHTMLタグの最適化HTML は Web 編集者にとって基本的なスキルであるべきで...
HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であ...