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

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

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 を応援していただければ幸いです。