iphoneの画面は小さいです。

縦でブラウザを見てる人にとっては、横幅320pxしかないです。

そんな中で、ページタイトルをテキストで表示しようとすると、十数文字書いただけで2行になっちゃったりしますが、 タイトルまわりは、とくに改行させたくない場合があります。

そんな時に便利なのが、

text-overflow:ellipsis;

というプロパティ


要素を越えるくらい長いテキストが出てくると3点リーダ(…)を使って、途中で切ってくれるすぐれもの。


実際にはwhite-spaceなどと組み合わせて以下のように使います。


.boxtitle{
width:200px;
overflow-hidden;
white-space:nowlap;
text-overflow:ellipsis;

PCでは使うことは少ないかもです。

あ、でも動的なサイト、SNSみたいなやつを作るときには便利かもしれないですね。