テキストがBoxからはみ出る場合に「…」を付けて省略する。

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

↓ 実際にはこうなるね

複数行の時にはどうすればいい？

この ellipsis は単一行にしか使えない。 複数行のテキストを途切れていいから、Box要素のサイズに合わせて流し込みたいってケースはあるもんだ。 色々調べてみると、Box要素の高さに収まるまで、末尾から文字をJavaScriptで徐々に削除するってのがある。

なるほど、なるほど

[ Insert ellipsis (…) into HTML tag if content too wide ]

しかし、JavaScriptの実行速度が速くなった最近だから使える大技だね。 数年前ではちょっと考えられなかったけど、今では充分使えそうだ。 一回で目減りさせる文字数を増やせば、精度は落ちるが速度は上がりそうだ。