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で対応可能の模様(今回は未検証ですが、類似項目としてメモしておきます)。

この辺りがクロスブラウザで楽に使えれば良いのですが。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。