...と省略して表示させるには

CSSで以下の画像のような見た目を作る方法についてです。

サンプルサイトへのリンク

ki-hi-ro.com

サンプルサイトのgithubリポジトリ

github.com

Code → Download ZIP で、Zipファイルのダウンロードが可能です。

HTML

<div class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

CSS

.ellipsis-text {
  width: 200px;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

-webkit-line-clamp
は、コンテンツを指定した行数に制限することができます。(今回は4行)

このプロパティと、 display: -webkit-box;、 -webkit-box-orient: vertical;、 overflow: hidden;をセットで使用すると省略記号が表示されます。

MDN

developer.mozilla.org

HTML / CSSについての本

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座