cssで3点リーダーを実装する

htmlで領域を超過したはみ出した文字列を設定した場合、自動的に改行されて表示されます。
これをcssで、iOSの表示の様に「…」3点リーダで省略表示する方法をメモしておきます。

サンプル表示例

サンプルソースコード

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

これでjavascriptやサーバ側で面倒な処理を書かなくて済みます。
サイズに応じて省略されるので、スマホサイトなどにもそのまま汎用的に使うことができます。