初心者SEのとりあえずメモ日記

初心者SEが技術的な事とかを、とりあえずメモしておくための日記です。

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

   

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

スポンサーリンク

サンプル表示例

3点リーダ省略をしない場合

3点リーダで省略をしする場合

サンプルソースコード

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

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


 - html
 -

  シェアしていただけるとうれしいです

  関連記事

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です