🌊
table内での三点リーダー（...）の表示を調べたら、意外と深かった話
はじめに
収まりきらない文字を1行に収めたいとき、次のようにして三点リーダー（…）で省略することはよくありますが、table内ではやったことがなかったので調べました。
div {
text-overflow: ellipsis; // ...を表示する
white-space: nowrap; // 改行させない
overflow: hidden; // 溢れた文字を隠す
}
調べた結果、table内で3点リーダーを出すには、max-width: 0;を足すだけで良いらしいです。
td, th {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 0; // 追加
}
理由
なんで、max-width: 0;を足すだけでいいのか、ということになりますが、それはtableタグがwidth指定を無視することに関係するようです。
max-width:0は、要素の幅を0にしようとするもの、つまり、中身全てがoverflowになるはずです。
しかし、tdにはデフォルトで
display: table-cell
がかかっているので、コンテンツがはみ出ていない通常時はmax-width:0なしで表示されます。
コンテンツがはみ出るくらいtdの幅が縮むと、max-width:0によって幅がテキストコンテンツの幅よりも小さくなり、収まりきらなくなったテキストはtdのoverflowになります。
tdがテキストのoverflowを持っている状態で、text-overflow: ellipsisが設定されると、三点リーダー（...）が表示される、という仕組みです。
Discussion