CreaTools LogoCreaTools
Tech Notes
Text Truncate

JavaScript でテキストを省略する｜CSSで無理なケースだけ使う

2025-11-28

結論：JSは最後の手段

CSSの text-overflow / line-clamp で対応できないケースだけ JavaScript を使う。

「とりあえずJS」は間違い。まずCSSを試せ。

JSが必要なケース（これ以外はCSS）

ケース理由
サーバーサイドで事前処理ブラウザがない
APIレスポンスの整形配信前に処理したい
単語の途中で切りたくないCSSでは制御不可
中央省略（ファイル名）CSSは末尾のみ
省略位置のカスタマイズCSSでは固定

上記以外は CSS（text-overflow / line-clamp） で対応できる。

基本の省略関数

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

// 使用例
truncate("これは長いテキストです", 8);
// → "これは長いテ…"

シンプルだが、単語の途中で切れる可能性がある。

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

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;
}

// 使用例
truncateWord("This is a long sentence", 15);
// → "This is a…"（"long" の途中で切らない）

日本語対応（句読点で区切る）

function truncateJa(text, maxLength, ellipsis = "…") {
  if (text.length <= maxLength) return text;
  
  const truncated = text.slice(0, maxLength);
  const breakPoints = ["。", "、", "！", "？", "）", "」"];
  
  for (let i = truncated.length - 1; i > maxLength * 0.5; i--) {
    if (breakPoints.includes(truncated[i])) {
      return truncated.slice(0, i + 1) + ellipsis;
    }
  }
  
  return truncated + ellipsis;
}

// 使用例
truncateJa("これは長い文章です。続きもあります。", 15);
// → "これは長い文章です。…"

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

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);
}

// 使用例
truncateMiddle("very-long-filename-2024.pdf", 20);
// → "very-lon…2024.pdf"

ファイル名は拡張子を残したいので中央省略が有効。

React コンポーネント例

function TruncatedText({ text, maxLength, ellipsis = "…" }) {
  const truncated = text.length > maxLength
    ? text.slice(0, maxLength) + ellipsis
    : text;
  
  return (
    <span title={text}>
      {truncated}
    </span>
  );
}

// 使用
<TruncatedText text="長いテキスト..." maxLength={20} />

title 属性でホバー時に全文表示。

省略記号の選び方

記号特徴
...3文字、スクリーンリーダーは「ピリオドピリオドピリオド」
…1文字（U+2026）、スクリーンリーダーは「省略」と読むことが多い
...前にスペース、英文向け

…（U+2026）推奨。 1文字で済み、読み上げも自然。

CSSで省略されているかをJSで検出

function isTextTruncated(element) {
  return element.scrollWidth > element.clientWidth;
}

// line-clamp の場合
function isTextClamped(element) {
  return element.scrollHeight > element.clientHeight;
}

// 省略されている場合のみツールチップを表示
const el = document.querySelector('.truncate');
if (isTextTruncated(el)) {
  el.title = el.textContent;
}

まとめ

やりたいこと関数
基本の省略truncate()
単語区切り（英文）truncateWord()
句読点区切り（日本語）truncateJa()
中央省略（ファイル名）truncateMiddle()

JSは最後の手段。まずCSSを試せ。

コード生成は Text Truncate で。

関連記事