htmlで領域を超過したはみ出した文字列を設定した場合、自動的に改行されて表示されます。
これをcssで、iOSの表示の様に「…」3点リーダで省略表示する方法をメモしておきます。
サンプル表示例
3点リーダ省略をしない場合
サンプルソースコード
div{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
これでjavascriptやサーバ側で面倒な処理を書かなくて済みます。
サイズに応じて省略されるので、スマホサイトなどにもそのまま汎用的に使うことができます。
コメント