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

公開日:2019-08-08
最終更新:2019-08-08
※この記事は外部サイト(https://labor.ewigleere.net/2019/08/08/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で対応可能の模様(今回は未検証ですが、類似項目としてメモしておきます)。

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

参考

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
アルム=バンドのQrunch

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする