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)
