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にブロックチェーンエンジニアとして入社。
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す