タイトルが次のように書き換えられました: フレックスボックス メニューとタイトル付きのテーブル - テーブルの幅に基づいてタイトルを切り詰めることは可能ですか?

Question

フレックスボックス CSS を使用してこのようなことを実現したいと考えています。メニューは固定幅ですが、テーブルは自動的に拡大する可能性があり、ヘッダーは長い場合でもテーブルの幅を超えてはなりません。言い換えれば、テーブルは列コンテナーを拡張できる必要がありますが、ヘッダーは拡張できません。

リーリー

1 つのフレックス列だけで簡単に実装できます。

リーリー

しかし、メニューを追加すると、すべてが正常ではなくなり、タイトルが切り詰められません。

リーリー

Answer 1

タイトルを含む要素のサイズを、その兄弟要素とともに変更しますが、その要素自体の子要素には影響を与えないようにしたいとします。

私が考える唯一の方法は、タイトル テキストを適切な要素 (この場合は <span>) で囲み、それから position:Absolute を使用してそれを削除することです。 from フローから取り出して、タイトルの親要素で position:relative を使用します。次に、タイトルの高さを設定する必要があります。

＃＃＃例＃＃＃

幅を

flex: 0 0 200px

に置き換えました。これにより、メニューのサイズが変更されなくなり、常に 200px のままになります。

リーリー リーリー