CreaTools LogoCreaTools
Tech Notes
Text Truncate

Text Truncate完全ガイド｜1行・複数行・JSが必要な境界線

2025-12-09

結論：この3行で即決

1行で省略 → text-overflow 2行以上で省略 → line-clamp それ以外（サーバー処理、単語区切り、中央省略） → JavaScript

迷う余地はない。計算・プレビューは Text Truncate で。

即決フロー

┌─────────────────────────────────────────┐
│ 何行で省略したい？                       │
└─────────────────────────────────────────┘
        ↓
┌─────────────────────────────────────────┐
│ 1行？                                    │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ text-overflow: ellipsis               │
│   （3プロパティセット）                  │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ 2〜n行？                                 │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ line-clamp                            │
│   （4プロパティセット）                  │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ CSSでは無理なケース？                    │
│ ・サーバーサイドで事前処理               │
│ ・単語の途中で切りたくない               │
│ ・中央省略（ファイル名）                 │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ JavaScript                            │
│   （最後の手段）                         │
└─────────────────────────────────────────┘

1行省略：text-overflow

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* 幅の制限が必要 */
}

この3プロパティはセット。どれか1つでも欠けると動かない。

Tailwind

<p class="truncate max-w-xs">長いテキスト...</p>

複数行省略：line-clamp

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

この4プロパティはセット。 -webkit- プレフィックスが必要だが、IE以外は対応済み。

Tailwind（v3.3+）

<p class="line-clamp-3">長いテキスト...</p>

JavaScript：最後の手段

CSSで対応できないケースだけJavaScriptを使う。

JSが必要なケース

ケース理由
サーバーサイドで事前処理CSSは使えない
単語の途中で切りたくないCSSでは制御不可
中央省略（ファイル名）CSSでは末尾省略のみ
省略位置のカスタマイズCSSでは固定

基本の省略関数

function truncate(text, maxLength, ellipsis = "…") {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength).trimEnd() + ellipsis;
}

単語の途中で切らない（英文向け）

function truncateWord(text, maxLength, ellipsis = "…") {
  if (text.length <= maxLength) return text;
  const truncated = text.slice(0, maxLength);
  const lastSpace = truncated.lastIndexOf(" ");
  if (lastSpace > 0) {
    return truncated.slice(0, lastSpace).trimEnd() + ellipsis;
  }
  return truncated.trimEnd() + ellipsis;
}

中央省略（ファイル名向け）

function truncateMiddle(text, maxLength, ellipsis = "…") {
  if (text.length <= maxLength) return text;
  const charsToShow = maxLength - ellipsis.length;
  const front = Math.ceil(charsToShow / 2);
  const back = Math.floor(charsToShow / 2);
  return text.slice(0, front) + ellipsis + text.slice(-back);
}

// "very-long-filename-2024.pdf" → "very-lon…2024.pdf"

アクセシビリティ（簡潔に）

ポイント対応
スクリーンリーダーは全文読み上げる知っておけばOK
ホバーで全文表示したいtitle 属性を追加
重要なテキスト展開ボタンを用意
省略記号…（U+2026）推奨
リンクテキスト省略しない
<p class="truncate" title="完全なテキストをここに">
  省略されたテキスト...
</p>

よくある事故

詳細は text-overflow が効かない時のチェックリスト を参照。

まずここを疑え

症状原因対処
省略されない幅が未指定max-width を追加
省略されないFlexアイテムmin-width: 0 を追加
... が出ないoverflow: hidden がない追加
line-clampが効かないdisplay: -webkit-box がない追加
1行にならないwhite-space: nowrap がない追加

Flexbox / Grid の罠

/* Flexアイテムは min-width: auto がデフォルト */
.flex-item {
  min-width: 0; /* これがないと省略されない */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

text-overflow と line-clamp の併用は不可

/* ❌ NG: 競合する */
.element {
  white-space: nowrap;    /* 1行に強制 */
  -webkit-line-clamp: 3;  /* 3行で省略 */
}

white-space: nowrap は1行強制。line-clamp と矛盾する。どちらか一方を使う。

まとめ

やりたいこと使う方法
1行で省略text-overflow（3プロパティセット）
2行以上で省略line-clamp（4プロパティセット）
サーバー処理・単語区切り・中央省略JavaScript
迷ったCSSで試す → 無理ならJS

基本はCSS。JSは最後の手段。

コード生成は Text Truncate で。

関連記事