Home
CSS
【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

公開日
2022.01.22
更新日
2022.04.02
【CSSのみ】指定行数を超えたテキストを非表示にする方法

どうも!かけちまるです!

この記事では、

  • ・3行以上のテキストを非表示にする方法
  • ・1行のテキストに3点リーダーを付ける方法
  • ・3行以上で最後に3点リーダーをつける方法
  • ・jQueryで動的に指定行数を変更する方法

を解説します。

3行以上のテキストを非表示にする

この方法は高さが固定されてしまうので横並びのコンテンツだと表示が崩れてしまうことになります。
しかし、すべてのブラウザでサポートされています。

こんな時に使えそう!
  • ・高さが可変出なくて良い時
    →2行の時は2行の高さ、1行の時は1行の高さにしたいときはお勧めできない。
  • ・IEに対応させたい時
 

実装サンプル

末尾に3点リーダーつかないがすべてのブラウザでサポートされています。高さが可変でないので横並びのコンテンツとかだと表示が崩れてしまうかも。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
CSS
コピー
.sample { font-size: 16px; line-height: 1.8; overflow: hidden; height: 5.4em; /* line-height 1.8 x 3em(行数) */ }
ポイント
  • overflow: hidden;ではみ出したテキストを非表示にします。
  • heightの単位をemで指定しています。
  • heightの数値はline-height × 最大行数で指定します。

1行のテキストに3点リーダーを付ける方法

この方法は、行数の指定はできませんがすべてのブラウザでサポートされているので1行に決まっているときに使えそうです。

こんな時に使えそう!
  • ・行数が1行と決まっている時
  • ・末尾に3点リーダーを付けたい時
  • ・IEに対応させたい時

実装プレビュー

複数行には対応していないが、末尾に3点リーダーがつくしすべてのブラウザでサポートされている。
CSS
コピー
.sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ポイント
  • overflow: hidden;ではみ出したテキストを非表示にします。
  • text-overflow: elipsis;でテキストが非表示になったときに末尾に三点リーダーをつけます。
  • white-space: nowrap;に指定して折り返しを無効にします。

3行以上で最後に3点リーダーをつける(IE非対応)

この方法は高さが動的に変わりますがIEはサポートしていません。
あとは-webkit-box-orientは非標準のプロパティのようです。

こんな時に使えそう!
  • ・複数行に対応させたい時
  • ・行数が少ない時は高さを合わせて欲しい時
  • ・末尾に3点リーダーを付けたい時
  • ・IEサポートを気にしなくていい時

実装プレビュー

末尾に3点リーダーがつき、複数行にも対応している。高さも行数によって変わるが、IEでサポートされていない。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
CSS
コピー
.sample { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 行数 */ }
こんな時に使えそう!
  • overflow: hidden;ではみ出したテキストを非表示にします。
  • -webkit-line-clampで行数を指定します。
  • display: -webkit-box;に指定します。
  • -webkit-box-orient: vetical;に指定します。
  • -webkit-line-clampを指定するにはdisplay-webkit-box-webkit-inline-boxに設定されており、かつ-webkit-box-orientverticalにする必要があります。

jQueryで動的に指定行数を変更する方法

ちょっとトリッキーですが、
今までのCSSとjQueryを使えば動的に最大行数を変更することもできます。

この記事では仮にボタンを押すと最大行数が変化するテキストを実装していきます。
JavaScriptだけ用意するのでHTMLとCSSは自由に実装してください。

実装プレビュー

下のボタンを押すと最大行数が変更されます。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
2行
3行
4行
JavaScript
コピー
function maxLine(selector, line){ selector.css({ '-webkit-line-clamp': String(line), 'line-height': '1.8', 'display': '-webkit-box', 'overflow': 'hidden', '-webkit-box-orient': 'vertical', }); } maxLine( $('.sample'), 2 ); $('#line_change2').on('click', function(){ maxLine( $('.sample'), 2 ); }); $('#line_change3').on('click', function(){ maxLine( $('.sample'), 3 ); }); $('#line_change4').on('click', function(){ maxLine( $('.sample'), 4 ); });

まとめ

今回は CSSで指定行数を超えた時にテキストを非表示にする方法を解説しました。

-webkit-box-orientは非標準プロパティのようなので3点リーダーをつけたいというこだわりがなければ別の方法が無難かも知れませんね。
といいつつ今のところ一番汎用性があると思うので個人的には使っていきたいと思ってます。

また、WordPressとかであればその辺はPHPでも対応できると思うので調べてみるとよさそうです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

【PHP】json_encode()とjson_decode()でJSONを操る

【PHP】json_encode()とjson_decode()でJSONを操る