[解決済み] テーブルセルでCSSテキストオーバーフロー？

質問

CSSを使いたい text-overflow で、テキストが長すぎて1行に収まらない場合、複数行に折り返すのではなく、省略記号で切り取るようにします。これは可能でしょうか？

こんなことをやってみました。

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

しかし white-space: nowrap は、テキスト (およびそのセル) を常に右側に展開し、テーブルの全幅をコンテナの幅以上に押し広げているように見えます。しかし、このオプションがない場合、テキストがセルの端に達すると、テキストは複数行に折り返されます。

解決するには？

テーブルセルからはみ出したテキストを省略記号付きでクリップするには max-width CSS プロパティは、各 td クラスでオーバーフローを動作させます。余計なレイアウトをしない div 要素が必要です。

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

レスポンシブ・レイアウトの場合 max-width CSS プロパティでカラムの実効最小幅を指定するか、あるいは、単に max-width: 0; を使用すると、無制限の柔軟性が得られます。また、包含するテーブルには特定の幅が必要で、通常は width: 100%; また、カラムの幅は通常、全体の幅に対するパーセンテージで設定されます。

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

歴史的なものです。IE 9 (またはそれ以下) では、IE 固有のレンダリングの問題を修正するために、HTML にこれを記述する必要があります。

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->