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

Result

よくある、テキストの文末を省略するやつです。

1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです

↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています

※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました

css

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

モダンなWebブラウザならご存知の通り、概ねline-clampだけで事足ります。

IE11はwrap-flowを使います。いわゆるExclusion(除外要素)の指定です。疑似要素に使う事で文末省略を実現しています。上記コードは3行に対応したコードなので、行数に応じてコードを変更してください。

まぁ、今後はMSのブラウザはWebkitベースになるようなのでこのコードも不要になるかもしれませんね

ca i use

line-clampの対応ブラウザ状況です

via

Multi-line-truncation in Pure CSS w/IE11 support (Exclusions)