Flexbox コンテナ内の空白の nowrap テキストがページからはみ出しています。
CSS レイアウトで奇妙なエッジケースに遭遇したようです。
テーブルがあり、1 つの列に 2 つの列を持つフレックス コンテナーがあります。最初の列には選択範囲が含まれており、2 番目のテキストは 1 行に収める必要があり、長すぎる場合は省略記号で終わります (テキストは動的です)
明確にしておきますが、私はテーブル HTML を制御できません。 HTML を追加できるのは列内のみです。
フレックスボックス内のテキスト オーバーフローは一般的な問題のようですが、私の場合は通常の解決策がすべて機能しませんでした。私が試したこと:
これは、さまざまな stackoverflow 記事で見つけたすべての解決策ですが、私にとっては何もうまくいきませんでした。フレックス コンテナーがテーブルの外にある場合は、すべてが正常に機能しますが、やはり、それは私にとって選択肢ではありません。
これで私の言いたいことが明確になります:
リーリー リーリー
このソリューションは最新のブラウザーでのみ機能するか、特定のブラウザーが必要な場合でも機能することに同意します。
P粉9086436112024-03-29 19:35:29
これを回避するには、vw 単位を使用して幅を .text に割り当てます。
たとえば、width: 50vw; を .text
P粉7152740522024-03-29 13:28:28
デフォルトでは、テーブルの幅は内容に応じて調整されます。 テーブル レイアウト更新アルゴリズム: 修正 ; を使用し、幅を制限するには width: 100%; を追加する必要があります: