flex が div で指定された幅よりも大きな幅を占めることを示します。

Question

div には特定の幅があり、内部のテキストは API から動的に派生され、省略記号のスタイルが付いています。テキストは完全に動的であり、テキストの長さが決定されていないため、テキストの幅を指定することはできません。以下は問題を説明するコードです。 リーリー リーリー

テーブル スタイルとしてこのようなものを生成しようとしています。誰かこの問題の解決を手伝ってくれませんか?

Answer 1

text-overflow: ellipsis; が適切に機能するには、inline-block スパン要素の幅を指定する必要があります。

したがって、

width: 130px; を .table-header__width-ellipses に追加し、width: 150px; を .container

動作するコード。

リーリー リーリー