以前にWordPressのタイトルや本文の文字数を制限する方法をご紹介しましたが、今回はCSSのみで長い文字列を省略する方法をご紹介します。
1行の長いテキストを指定の幅を超えたら省略する場合はtext-overflow: ellipsis;を使用します。
ただし、長さが可変するinline-blockなどでは使用できないので注意してください。
.ellipsis {
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
みこと
なるほど！幅が固定されていないと上手く省略されないんですね。
camoさん
親要素の幅が決まっていれば指定しなくても問題ないよ。
flexboxを使用した要素だと上手く省略されない場合もあるから自分なりに色々と試して検証してみるといいよ！
各CSSプロパティの説明
| text-overflow: ellipsis; | テキストがはみ出た場合に「…」で表示する |
|---|---|
| white-space: nowrap; | テキストを折り返さない（改行させない） |
| overflow: hidden; | はみ出した部分を表示しない |
1行でなくて、2行や3行表示させて最後は省略記号「…」を使用したい場合があると思います。その場合には、-webkit-line-clampを使用します。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}みこと
-webkit-line-clampの数字を変更することで行数が変更できるということですね。
camoさん
あと、複数行の場合には幅を固定しなくても省略することができるよ。
各CSSプロパティの説明
| display: -webkit-box; | flexboxの古いバージョンに対応 |
|---|---|
| -webkit-line-clamp: 3; | コンテンツの行数を指定 |
| -webkit-box-orient: vertical; | コンテンツを垂直にレイアウト |
前回のPHPでの文字数制限と今回のテキストの省略方法は適材適所で使用すると便利です。
文章の長いコンテンツ内容の一部だけを表示するのであれば「PHPでの文字数制限」、タイトルのような短めの文字列を省略するのであれば「CSSによる文字数制限」という感じで使い分けるとよいです。
また、コンテンツ内容を3行分表示したいという時には、両方を使用することをおすすめします。
PHPによる文字数制限では、数字や記号といった文字が入ると文字数を制限していても見た目がキレイに揃いません。その場合、少し長めの文字数で制限しつつ、CSSの複数行の省略を使用することで文字数制限して見た目のレイアウトもキレイにすることが可能です。
あわせて読みたい記事
WordPressのタイトルや本文の文字数を制限する方法
