CSSだけで文字列を省略して「・・・」を付けて表示する方法

javascriptやphpを使わずに
CSSだけで文字列を省略して「・・・」を付けて表示
させるテクニックを発見
前からできる感じだったが、つい最近知りました。
FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法

どうやるかというと
text-overflow: ellipsis;
を使う。


ellipsis は、はみ出した部分の最後に「・・・」を付け足す。
ちなみに clip は、何もつけません。
text-overflow: ellipsis;　だけだと上手くいかないので

やり方としては、
横幅(width)、white-spce: nowrap、overflow:hidden;
を指定する。

こんな感じ

hoge {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}


サイトから引用
text-overflowプロパティにはInternet Explorerのバージョン6以上とSafari、Operaが対応している。
ただし、Safariでは-webkit-text-overflow、Operaでは-o-text-overflowと記述する。

長い文字列を「・・・」にするだけでなく
CSSでボックスからはみ出した文字列を自動で折り返すやり方も使えます。