…で長文を省略するCSS

Instagramのフィードを表示するコードに使いたくて調べる。全ての投稿内容を記載するわけにいかないので、「…」で省略するしたいのだけど、JS使うと複雑だったり負荷がかかったりすると嫌なのでCSSで簡単に対応したい。

参考：IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する

モダンなWebブラウザならline-clamp、IE11はwrap-flowを使う。

See the Pen InstagramFeedList by yuming (@yuuuming) on CodePen.

.InstagramFeed ul li span.caption {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.InstagramFeed ul li span::before, .InstagramFeed ul li span::after {/*IE用。疑似要素に除外設定*/
  content: '...';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
}
.InstagramFeed ul li span::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 2) {/*モダンブラウザ用*/
  .InstagramFeed ul li span {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .InstagramFeed ul li span::before, .InstagramFeed ul li span::after {
    content: normal;
  }
}