cssだけで文字列を省略して3点リーダーを表示する方法|複数行対応




WEBサイトを作ってたら必ず必要となってくる3点リーダーの一番簡単な設定方法を紹介します。

たったこれだけで3点リーダーを実現できます。

.content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

それぞれのプロパティの意味は下記です。

  • overflow: hidden→エリア外を表示しない
  • -webkit-line-clamp→指定した数字分だけ「・」を表示します
  • display: -webkit, -webkit-box-orient: vertical→複数行で文字列省略を表現するためにこの2つを設定

より詳細な説明は今後追記していきます。

サーバサイドばっかりやってたのでCSSの知識はほぼ皆無ですが少しづつ使えるようになろうと思います。

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

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