3点リーダーとは
3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。
3点リーダーを実装するために必要な4つの設定
1、ボックスのwidthの指定
テキストが表示される領域の幅を指定します。
2、white-space: nowrap;
テキストの改行を禁止し、1行で表示します。
3、overflow: hidden;
テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。
4、text-overflow: ellipsis;
非表示の溢れた部分を3点リーダー（...）で表示します。
See the Pen Untitled by kidorina (@kidorina) on CodePen.
簡単に長いテキストを省略することができます。
Table内での3点リーダーの挙動
Table内で3点リーダーを使用するときは、display: table-cell;、max-width、width: 100%; が混在することで、少し複雑な挙動になります。
Table内で3点リーダーを実装する
Table内で3点リーダーを実装するには、上記4つの設定に加えて max-width: 0; を設定します。（widthは100%）
See the Pen Table by kidorina (@kidorina) on CodePen.
どういう仕組み？
max-width: 0; の役割
テーブルのカラムに max-width: 0; を指定すると、一見すると中のテキストがすべてオーバーフローするように思えますが、実際には以下の理由により正しく動作します。
テーブルの特性
テーブルのカラムに display: table-cell; と width: 100%; を設定すると、テーブル全体の幅に応じてカラムの幅が調整されます。
このため、max-width: 0; が通常のボックスモデルとは異なる挙動になります。
条件下での max-width: 0; の動作
max-width: 0; が影響を及ぼすのは、カラムの幅が中に含まれるテキストコンテンツの幅よりも狭くなった場合です。
最大幅が0で設定されていることによって、カラムの幅が制約されてテキストが完全に表示されず、オーバーフローが発生します。
text-overflow: ellipsis の効果
カラムがテキスト全体を表示できない場合、オーバーフローが発生します。
このとき、text-overflow: ellipsis; が設定されていることで、見切れたテキスト部分が省略記号「...」で表示されます。
まとめ
Table内の3点リーダーの実装では、カラムの幅がテキストを超える場合に max-width: 0; があることでテキストのはみ出しを強制し、省略表示が可能になります。