KAKERU Designing トミー（末富将也）

長い文字を「…」で省略するCSS｜1行・複数行の切り方と使いどころ4種類

長い文字を「…」で省略する一覧の見本とコード

お知らせの題名や、カードの説明文が長いとき、決めた行数で切って最後に「…」を付ける。CSSだけでできる表示です。1行で切る方法と、2行・3行で切る方法の2つがあります。

使いどころは、一覧の中で1件ずつの高さをそろえたい場所です。ただし、切れた先を読める場所（記事のページや「続きを読む」）を必ず用意します。値段・日付・注意書きなど、切れると意味が変わる文には使いません。

この記事の要点

  • text-overflow: ellipsis で1行、-webkit-line-clamp で2行・3行の文字を切り、最後に「…」を出せる
  • 使いどころは、一覧やカードで1件ずつの高さをそろえたい場所。値段・日付・注意書きのように、切れると意味が変わる文には使わない
  • 切れた文字は、リンク先や「続きを読む」で全部読めるようにする。title 属性の説明だけに頼らない
トミー

連載「WEBの技術」の52回目です。
「…」は1行のCSSで出せますが、「どこまで切ってよいか」は毎回考えるところです。今回は、その判断も一緒に書きます。

完成見本：「…」で省略する4種類

1〜3は、箱の幅が自動で広がったり縮んだりしています。幅が足りなくなると「…」が出ます。4は、開く・閉じるを自動でくり返しています。

ONE LINE1. 1行で「…」お知らせの題名、表の中の名前に
LINE CLAMP2. 3行で「…」カードの説明文、記事一覧の抜粋に
READ MORE4. 「続きを読む」で全部見せる口コミやプロフィールなど、全文も読ませたい場所に

※ 見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-el は、サイトのほかのデザインと名前がぶつからないようにするための目印です。3は1のCSSを、4は2のCSSを一緒に使います。

1. 1行で「…」

white-space: nowrap（折り返さない）で文字を1行に並べ、overflow: hidden（はみ出しを隠す）で切ります。最後に text-overflow: ellipsis を付けると、切れたところに「…」が出ます。3つそろって初めて効きます。

HTML
<p class="kd-el-1">年末年始の営業日と、お問い合わせへの返信についてのお知らせ</p>
CSS
/* 1・3で使う：1行で「…」 */
.kd-el-1 {
  overflow: hidden;        /* はみ出した分を隠す */
  white-space: nowrap;     /* 折り返さない */
  text-overflow: ellipsis; /* 隠れた分を「…」で示す */
}
.kd-el-1 {
  margin: 0;
  max-width: 100%;
}

2. 3行で「…」

-webkit-line-clamp で、何行まで見せるかを決めます。display: -webkit-box と -webkit-box-orient: vertical と組み合わせたときだけ効く決まりです。切るのは、余白（padding）のある外側の箱ではなく、文章の p のほうです。

HTML
<div class="kd-el-card">
  <p class="kd-el-3">ホームページのお問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。これまでのフォームから送られた内容も、今までどおり受け付けています。</p>
</div>
CSS
/* 2・4で使う：3行で「…」 */
.kd-el-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 3行まで */
  overflow: hidden;
}
.kd-el-card {
  box-sizing: border-box;
  max-width: 320px;
  padding: 16px 18px;
  border-radius: 12px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(16, 40, 58, 0.12);
}
.kd-el-card p {
  margin: 0;
  line-height: 1.7;
}

3. 日付と並べて1行で

日付と題名を display: flex で横に並べ、題名だけを1の形で省略します。題名を包んでいる .kd-el-body に min-width: 0 を付けるのがポイントです。これがないと、題名の長さに合わせて箱が広がり、「…」が出ません。

HTML
<a class="kd-el-row" href="/news/1/">
  <time datetime="2026-11-10">2026.11.10</time>
  <span class="kd-el-body">
    <span class="kd-el-cat">お知らせ</span>
    <span class="kd-el-1">年末年始の営業日と、お問い合わせへの返信についてのお知らせ</span>
  </span>
</a>
CSS
/* 1のCSSも使います */
.kd-el-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  padding: 12px 4px;
  border-bottom: 1px solid #D5E0E8;
  color: #10283A;
  text-decoration: none;
}
.kd-el-row time {
  flex: none;              /* 日付は縮めない */
  font-size: 13px;
  color: #4A5F70;
}
.kd-el-body {
  flex: 1;
  min-width: 0;            /* これがないと「…」が出ない */
}
.kd-el-cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0369A1;
}
.kd-el-body .kd-el-1 {
  display: block;
}

4. 「続きを読む」で全部見せる

2の3行の形に、「続きを読む」ボタンを足します。JSで、文章が実際に切れているときだけボタンを出します。押すと is-open が付いて3行の制限が外れ、aria-expanded（開いているかどうかを伝える属性）も切りかわります。

HTML
<div class="kd-el-more">
  <p class="kd-el-3" id="kd-el-text1">ホームページのお問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。これまでのフォームから送られた内容も、今までどおり受け付けています。</p>
  <button type="button" class="kd-el-btn" aria-expanded="false" aria-controls="kd-el-text1" hidden>続きを読む</button>
</div>
CSS
/* 2のCSSも使います */
.kd-el-more {
  max-width: 320px;
}
.kd-el-more p {
  margin: 0;
  line-height: 1.7;
}
.kd-el-more .kd-el-3.is-open {
  display: block;          /* 3行の制限を外す */
  overflow: visible;
}
.kd-el-btn {
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid #0284C7;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: #0369A1;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.kd-el-btn:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
}
JavaScript
document.querySelectorAll('.kd-el-more').forEach(function (box) {
  var text = box.querySelector('.kd-el-3');
  var btn = box.querySelector('.kd-el-btn');
  // 3行に収まっているなら、ボタンは出さない
  if (text.scrollHeight <= text.clientHeight + 1) return;
  btn.hidden = false;
  btn.addEventListener('click', function () {
    var open = text.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    btn.textContent = open ? '閉じる' : '続きを読む';
  });
});

4は、実際に押して試せます。

ホームページのお問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。これまでのフォームから送られた内容も、今までどおり受け付けています。

4のJSは、ページの最後（</body> の直前）に置きます。画面の幅を変えたあとの切れ方には合わせ直さない、短い形にしています。

仕組み：文字はどこに消えているのか

消えたのではなく、見えないだけ

「…」の後ろの文字は、HTMLから消えたわけではありません。箱の外にはみ出した分を、overflow: hidden で見えなくしているだけです。Chromeのアクセシビリティツリー（読み上げソフトに渡す情報）でも、4の文章は最後まで入っていました。

1行の省略は、3つそろって初めて効く

MDNによると、text-overflow は、はみ出した文字を「どう見せるか」を決めるだけのプロパティです。はみ出しそのものは作りません。そのため、white-space: nowrap で折り返しを止めて文字を横にはみ出させ、overflow: hidden で隠す、という2つの指定が要ります。どれか1つが欠けると「…」は出ません。

また、text-overflow が効くのは横方向のはみ出しだけです。下にあふれた文字には効きません。2行以上で切るときは、次の -webkit-line-clamp を使います。

2行以上は、-webkit- の付いた3点セット

-webkit-line-clamp は、display: -webkit-box と -webkit-box-orient: vertical と組み合わせたときだけ効きます。名前に -webkit- が付いていますが、MDNの対応表では、Chrome・Firefox・Safariの正式版で使えます。MDNには、この3つの組み合わせは今後も使える、と書かれています。

接頭辞のない line-clamp もありますが、2026年11月10日に見たMDNの対応表では、正式版のブラウザではまだ使えません。今は3点セットで書きます。

flex の中で「…」が出ない理由

MDNによると、flex や grid の中に置いた要素は、min-width の初期値 auto が「中身の幅」になる場合があります。題名を包んでいる箱が、題名の長さより細くならないので、題名ははみ出したままになります。包んでいる箱に min-width: 0 を付けると、細くなれるようになり、「…」が出ます。

数値を変えるとどうなるか

何行で切るか

2の見本の行数だけを変えました。

1行：題名だけに
2行：一覧の抜粋に
3行：今回の見本

題名なら1〜2行、カードの説明文なら2〜3行が目安です。1行まで短くすると、何の話かが伝わらないことがあります。切った文だけで「読みに行くかどうか」を決められる長さを残します。

どの箱に付けるか

余白のある箱に付けた：4行目がのぞく
中の p に付けた：今回の見本

左は、余白（padding）のあるカードそのものに付けた例です。overflow: hidden は余白の外側で切るので、4行目の上の部分が余白にのぞきます。右のように、余白のない中の p に付けると、3行できれいに切れます。

flex の中の min-width

左は min-width: 0 を外した例です。題名が箱をはみ出して、右側で切れています。「…」も出ません。flex で横に並べた一覧で「…」が出ないときは、まずここを確かめます。

スマホと、見る人への配慮

切れた先を、必ず読めるようにする

W3Cの解説（1.4.10と1.4.12）では、文字を「…」で省略するなら、リンク先のページか、ページの中の仕組みで、隠れた文字を全部見られるようにすることが求められています。お知らせ一覧の題名なら、記事のページへのリンクで足ります。リンクのない場所で切るなら、4の「続きを読む」のような手段を付けます。

title 属性だけに頼らない

マウスを乗せると全文が出る title 属性を、省略の代わりに付ける例をよく見かけます。MDNは、タッチ操作の人・キーボード操作の人・拡大して見ている人などには、title の説明が届きにくいと書いています。全文を読める手段は、ほかに用意します。

文字を大きくすると、切れる量が増える

ブラウザで文字を大きくしている人には、同じ箱でも切れる文字が増えます。W3Cの解説（1.4.12）にも、文字の間隔を広げたときに「…」になるなら、隠れた文字を見られる手段が必要だと書かれています。2倍くらいに拡大して、切れた文が意味の分からない長さになっていないかを確かめます。

スマホでは、行数を変えてもよい

スマホは画面が細いので、同じ3行でも読める文字がパソコンより少なくなります。スマホだけ行数を増やすなら、@media (max-width: 767px) { .kd-el-3 { -webkit-line-clamp: 4; } } のように、行数だけを書きかえます。

やりすぎ注意

ボタンの文字、メニューの項目、エラーメッセージ、値段、申し込みの条件。こうした文は、切れると操作や判断を間違えます。省略するのは、全文が別の場所にある文だけにします。

AIに頼むなら

Claudeなどの生成AIに頼むときは、何行で切るか、どこに付けるか、切れた先をどう読ませるかまで伝えると、手直しが減ります。

このお知らせ一覧（HTMLを貼る）の題名を、1行で「…」にして。日付は縮めず、題名だけ省略。
カードの説明文は3行で「…」に。padding のあるカードではなく中の p に付けて。
全文は記事ページへのリンクで読めるようにして、title 属性は使わないで。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • flex や grid の中で、「…」が本当に出ているか。min-width: 0 が抜けていると、はみ出したままになります。スマホの幅で長い題名を入れて見ます
  • 余白のある箱に直接付けていないか。4行目の上の部分がのぞきます
  • 切れた先を読む手段があるか。title 属性だけになっていないか、ボタンにキーボードで届くかを確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • お知らせ一覧の題名。1件を1行にそろえると、日付で探しやすくなります。全文は記事のページで読めます
  • 記事やサービスのカードの説明文。2〜3行で切ると、カードの高さがそろい、並びがきれいに見えます
  • 口コミやプロフィールのように、長さがばらばらの文。4の「続きを読む」で、読みたい人だけが開けるようにします

使わない場面

  • 記事の本文や、会社案内の文章。読ませたい文章を切る理由がありません
  • 値段・日付・注意書き・エラーメッセージ。切れると意味が変わります。文を短く書き直すか、折り返して全部見せます
  • ボタンやメニューの文字。どこへ進むのかが分からなくなります。文字を短くするほうが先です
  • 題名が短く、切れることがほとんどない場所。付けても困りませんが、切れたときに読む手段まで用意する手間のほうが大きくなります
トミー

KAKERUなら、まず「文を短く書けないか」を考えます。
それでも長さがそろわない一覧で、全文を読める場所があるときにだけ、「…」を使います。

まとめ

  • 1行は white-space: nowrap・overflow: hidden・text-overflow: ellipsis の3つで切る
  • 2行以上は display: -webkit-box・-webkit-box-orient: vertical・-webkit-line-clamp の3点セット
  • flex の中では、包んでいる箱に min-width: 0。余白のある箱ではなく、中の文に付ける
  • 使うのは、高さをそろえたい一覧やカード。切れると意味が変わる文には使わない
  • 切れた先は、リンク先か「続きを読む」で全部読めるようにする

まずは1のコードをコピーして、お知らせ一覧の題名で試してみてください。flex で並べているなら、min-width: 0 を忘れずに。

参考にした資料

いずれも2026年11月10日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

読み込み中の灰色の形（スケルトンスクリーン）の見本とコード
関連記事読み込み中の灰色の形をCSSで｜スケルトンスクリーンの作り方と使いどころ4種類
カードを並べるCSS。グリッドで自動で折り返す、auto-fillとauto-fitの違いと使う・使わないの判断
関連記事カードを並べるCSS｜グリッドで自動で折り返す、auto-fillとauto-fitの違いとコピペで使える4種類
ツールチップをCSSで作る。ボタン・言葉・アイコンに説明が出る見本とコード
関連記事ツールチップをCSSで作る｜マウスを乗せると説明が出る部品、コピペ4種類と使いどころ

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回ページ内リンクの飛び先が固定ヘッダーに隠れないCSS｜scroll-margin-topとscroll-padding-topの使い分け3種類WEB技術・前の回読み込み中の灰色の形をCSSで｜スケルトンスクリーンの作り方と使いどころ4種類
長い文字を「…」で省略する一覧の見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事