【CSS】たった数行で実現！複数行のテキストを「…」で省略する方法

コーダーのためのWeb制作ブログ、中の人のhisaです👋
案件が忙しすぎて中々ブログ記事を作成出来なかったので久々に書きます！

テキストの「はみ出し」問題、もう悩みません！

Webサイトを制作していると、「お知らせのタイトルが長すぎて、カードデザインから盛大にはみ出してしまった…」「ユーザーが入力した紹介文の長さがバラバラで、レイアウトがガタガタに…」なんて経験、ありませんか？

そんな時、JavaScriptで文字数を制限するのも一つの手ですが、実はCSSのプロパティをいくつか追加するだけで、もっと手軽に、そしてスマートにこの問題を解決できるんです！

この記事を読めば、複数行のテキストを指定した行数で切り取り、末尾に「…」と省略記号を表示する方法が身につきます。

なぜ「複数行の省略」が重要なのか？

デザインの統一性は、Webサイトの品質を左右する重要な要素です。特に、ブログの一覧ページや商品リストなど、同じ要素が繰り返し表示される場面では、テキストの長さがバラバラだと、全体のデザインが崩れ、ユーザーにまとまりのない印象を与えてしまいます。

かといって、表示できる文字数を厳密に制限してしまうと、伝えたい情報が途切れてしまい、かえってユーザー体験を損なう可能性もあります。

そこで役立つのが、CSSによる複数行のテキスト省略です。このテクニックを使えば、

• デザインの統一性を保てる: テキストを指定した行数で切り揃え、レイアウトの崩れを防ぎます。
• 情報を簡潔に伝えられる: 全文を表示せずとも、ユーザーに「続きを読む」ことを促せます。
• 実装が簡単: JavaScript不要で、CSSだけで完結するため、パフォーマンスにも影響を与えません。

まさに、見た目の美しさと使いやすさを両立させるための必須テクニックと言えるでしょう。

省略表示を実現するCSSプロパティの解説

それでは、実際にコードを見ていきましょう。複数行の省略表示は、主に以下の4つのCSSプロパティを組み合わせることで実現します。

.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3; /* 表示したい行数を指定 */
-webkit-box-orient: vertical;
overflow: hidden;
}

それぞれのプロパティが何をしているのか、分解して見てみましょう。

display: -webkit-box;

要素の表示形式を「フレキシブルボックス」として扱います。このテクニックを使うための土台となるプロパティです。ベンダープレフィックス（-webkit-）が付いていますが、複数行の省略表示を実現するためには現在でもこのプロパティが必要です。

-webkit-line-clamp: 3;

これが「何行で省略するか」を指定するプロパティです。この例では 3 を指定しているので、テキストは3行まで表示され、それを超える部分は省略されます。この数値を 2 や 4 に変更すれば、表示行数を自由自在にコントロールできます。

-webkit-box-orient: vertical;

ボックス内のコンテンツを垂直方向に配置します。display: -webkit-box; とセットで記述する必要があるプロパティです。

overflow: hidden;

-webkit-line-clamp で指定した行数からはみ出した部分を、最終的に非表示にします。これがなければ、テキストは省略されずにそのまま表示されてしまいます。

これらのプロパティをセットで使うことで、複数行のテキスト省略が実現できる、というわけです。

今すぐ使える！コピペで実装コード

以下のコードをコピーして、あなたのプロジェクトで試してみてください。

display: -webkit-box;
-webkit-line-clamp: 3; /* ←ここの数字を変えるだけで行数を調整できます！ */
-webkit-box-orient: vertical;
overflow: hidden;

使い方:

1. 省略したいテキストを p タグや div タグで囲みます。
2. その要素に、CSSで定義したクラス（この例では line-clamp-3）を適用します。

たったこれだけで、テキストの「はみ出し」問題とはおさらばです！ぜひ、あなたのWeb制作に活用してみてください。

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ X@TumaLOVE0127もフォローしてもらえるとめちゃくちゃ嬉しいです！