10秒で実装！CSSで行数制限の設定する方法（display: -webkit-box;）

みなさんこんにちは！エンジニアの高澤です！

今回はCSSで行数制限の設定する方法について解説していきたいと思います。

当記事はあえてすぐに仕事で使えるようにする目的で短めの記事にし、すぐにCSSコードをコピー＆ペーストしてお使いいだけるように構成いたしました。

よろしければお役立ていただけましたら幸いです。

今回実装する内容

今回実装する内容は、CSSコードでテキストの行数を任意の行数に制限することができる実装になります。

例えば、記事一覧などでタイトルの文字数がそれぞれ記事ごとにバラバラで、行数に違いが出ることでレイアウトが崩れてしまうなどの問題が起こってしまうことがあるかと思います。

そんな時に今回解説するCSSコードによって、指定した行数目で文字数がMAXになったら自動で末尾に「…」となって制限してくれます。

上図のように、4行で制限するCSSコードを実装しておけば自動的に4行目で行数を制限してくれます。

実装する方法

それでは早速実装方法について解説していきたいと思います。

以下のCSSコードを行数を制限したいHTML要素（タイトルのhタグや段落のpタグなど）に記述してください。

「.element」はご自身の指定したいHTML要素のclass名かID名に変更してください。

.element{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

上記コードは2行目までを表示してくれるコードになります。

これで実装は完了です。

お疲れ様でした！

CSSによる行数制限のメリット

当記事のCSSコードによる行数制限（-webkit-line-clamp）のメリットを、ここで解説させていただきます。

手軽にテキストの表示を制限できる

このCSSを適用するだけで、簡単に行数制限を実装できます。記事やブログの概要やプレビューなど、特定の部分に対して長いテキストを2行だけに制限して表示する場面で非常に役立ちます。JavaScriptを使う必要がなく、10秒程度で実装できるのが大きな魅力です。

レイアウトが崩れにくい

overflow: hidden;を設定することで、行数を超えたテキストは切り捨てられ、視覚的な表示が保たれます。これにより、要素内に収めたいコンテンツの範囲が確実に守られるため、デザインやレイアウトが崩れにくく、見栄えが整った状態を維持できます。

コードがシンプル

JavaScriptを使ってテキストをカットする方法よりも、このCSSによる行数制限ははるかにシンプルで、保守性が高いです。追加するコードが少なく、読みやすいという点で、特に初心者や手軽に実装したい場面で効果を発揮します。

パフォーマンスに優れている

CSSで行数制限を行うため、JavaScriptのようにブラウザでのパフォーマンスに影響を与えることがなく、動作も軽快です。特に、大量のテキストがある場合やモバイル端末で表示する際に、ページの読み込み速度やパフォーマンスが向上します。

テキストの一貫性を保つ

例えば、ブログのカード形式や記事一覧ページなど、すべてのコンテンツブロックで一定の行数を表示できるため、視覚的に整ったデザインを簡単に実現できます。一定の行数に制限することで、テキストの一貫性が保たれ、見やすいインターフェースを提供します。

クロスブラウザ対応が簡単

当記事のコードは、-webkitプレフィックスを使うことで、WebKit系ブラウザ（ChromeやSafari）に対応しています。他のブラウザ（FirefoxやEdgeなど）では、display: -webkit-box;と-webkit-line-clampは直接対応していないものの、必要に応じてJavaScriptを組み合わせるか、CSS GridやFlexboxのフォールバックを使うことで対応が可能です。

WordPressでのPHPの処理との比較

WordPressでは、PHPとCSSのどちらかを使って文字数や行数を制限することができますが、それぞれ異なる特徴と利点、欠点があります。以下に両方のやり方と、それぞれのメリット・デメリットを解説します。

PHPでの文字数制限のメリット・デメリット

PHPでの文字数制限のメリット・デメリットは以下になります。

メリット

クロスブラウザ対応：PHPはサーバーサイドの処理なので、すべてのブラウザで一貫して動作します。ユーザーのブラウザ環境に影響されず、文字数制限を正確に適用可能です。

文字単位での正確な制御：特定の文字数（例: 100文字）で制限したい場合、PHPの方が正確に制御できます。行数ではなく、文字数で制限することが求められる場面では最適です。

SEOに影響しない：PHPで制限した文字数だけがHTMLに出力されるため、隠れたテキストがなく、SEOに有利です。

デメリット

テンプレートやPHPコードの編集が必要：コードをPHPに直接追加する必要があり、テーマやプラグインのコード編集が苦手な方には難しい場合があります。

スタイルの影響を受けない：文字数を制限するだけなので、テキストの見た目やレイアウトに関わるスタイルは適用されません。つまり、デザインによる柔軟な制御がしづらいです。

CSSでの行数制限のメリット・デメリット

CSSでの行数制限のメリット・デメリットは以下になります。

メリット

見た目の調整が簡単：CSSを使うため、ビジュアルデザインとレイアウトに影響を与えるテキストの表示調整が容易です。テーマのデザインにあわせて柔軟に制限できます。

コードがシンプル：特定のクラスにスタイルを追加するだけで行数を制限でき、テンプレートファイルを直接編集する必要がありません。HTMLやCSSが少しわかればすぐに実装できます。

動的コンテンツ対応：同じCSSルールを複数の要素に適用できるため、例えば記事一覧ページなどで統一した見た目にしたいときに有効です。

デメリット

クロスブラウザの問題：-webkit-line-clampはWebKit系ブラウザ（Chrome, Safari）に対応していますが、FirefoxやInternet Explorerなどではサポートされていません。そのため、ブラウザによっては期待通りに動作しないことがあります。

行数のみの制御：CSSでは行数の制限は可能ですが、文字数単位での制限ができません。異なるフォントサイズやスタイルにより、表示されるテキスト量が変わる可能性があります。

SEOの影響：CSSで隠れたテキストはHTMLに存在するため、検索エンジンにインデックスされます。SEOの観点で制限したい場合、CSSよりもPHPの方が有効です。

双方の比較まとめ

WordPressでのPHPの処理との比較について、表にしてみましたのでよろしければご参考にしていただけますと幸いです。

まとめ

CSSで行数制限の設定する方法についての解説は以上になります。

当記事のCSSによる行数制限は、シンプルかつ効率的な実装方法で、デザインの見栄えを保ちながら、スムーズにユーザーに情報を提供できます。

よろしければお役立ていただけましたら幸いです。