質問: テーブルセル内のcssテキストオーバーフロー? テキストを1行に収めるには長すぎる場合は、複数行に折り返すのではなく省略記号でクリップするように、テーブルセルでcss text-overflowを使用したいと思います。これは可能ですか?私はこれを試しました:td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } しかしwhite-space: nowrapはテキスト(とそのセル)を継続的に右に拡大し、テーブルの全幅をそのコンテナの幅を超えてプッシュします。これがないと、テキストがセルの端に当たったときにテキストが複数行に折り返され続けます。
回答: 固定幅を何も設定したくない場合以下の解決策では、テーブルセルの内容を長くすることができますが、親テーブルの幅や親行の高さには影響しません。たとえば、他のすべてのセルに自動サイズ設定機能を適用するwidth:100%を含むテーブルが必要な場合です。 "notes"または "comment"列などを持つデータグリッドで役立ちます。 あなたのcssにこれら3つの規則を加えなさい:.text-overflow-dynamic-container { position: relative; max-width: 100%; padding: 0 !important; display: -webkit-flex; display: -moz-flex; display: flex; vertical-align: text-bottom !important; } .text-overflow-dynamic-ellipsis { position: absolute; white-space: nowrap; overflow-y: visible; overflow-x: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; max-width: 100%; min-width: 0; width:100%; top: 0; left: 0; } .text-overflow-dynamic-container:after, .text-overflow-dynamic-ellipsis:after { content: '-'; display: inline; visibility: hidden; width: 0; } 動的テキストのオーバーフローが必要なテーブルセルに、このようにhtmlをフォーマットします。<td> <span class="text-overflow-dynamic-container"> <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability..."> //...your long text here... </span> </span> </td> さらに、テーブルセルに必要なmin-width(またはまったくなし)を適用します。もちろんフィドル: https://jsfiddle.net/9wycg99v/23/ /