cssで複数行に渡る文章の行末を省略して「…」を表示したい

とりあえず必要に迫られ、簡単に実装できる方法を探していたので試しました。 調べてみるとクロスブラウザ対応が厳しそうなので、きちんとやるにはJavaScriptで文字数をカウントしてもにょもにょした方が確実そうですが。

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

この4行をセットで記述すると、行末を省略して「…」で表示することができます。 ただし、-webkitのベンダープレフィックスが付いている通り基本的にChromeに限定と考えた方が良さそうです。 動きとしてはFirefoxも確認しましたが、MDNに拠ると標準として実装する予定はないそうなので、将来的に使い続けられるか不透明。 それを踏まえた上での方法ということになりそうです。

.p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
} 

1行だけならば上記のcssで対応可能の模様(今回は未検証ですが、類似項目としてメモしておきます)。 この辺りがクロスブラウザで楽に使えれば良いのですが。

参考

• CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） | NxWorld
• 【PHP/CSS】任意の文字数以上を省略する方法 | White Space
• 複数行のテキストを CSS だけで省略表示する -webkit-line-clamp を試してみた – Corredor
• box-flex – CSS: カスケーディングスタイルシート | MDN