はじめに (対象読者・この記事でわかること)

この記事は、WebサイトやWebアプリケーションのフロントエンド開発に携わる方、特にUI/UXの改善に関心があるエンジニアを対象としています。JavaScriptの基本的な知識があれば、よりスムーズに読み進めることができます。

この記事を読むことで、HTMLに表示されるテキストが、与えられたスペース内で折り返すかどうかをJavaScriptで事前に、あるいは動的に判定する具体的な方法を学ぶことができます。これにより、テキストのオーバーフローによるレイアウト崩れを防ぎ、ユーザーに快適な閲覧体験を提供するためのテクニックを習得できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * HTML/CSSの基本的な知識（要素の配置、スタイリングなど） * JavaScriptの基本的な文法とDOM操作の知識

なぜテキストの折り返し判定が必要なのか？

Webページ上のテキストは、その内容やデザインによって様々な表示が求められます。しかし、画面幅が異なるデバイス（PC、タブレット、スマートフォン）で同じページを表示する場合、テキストが意図せず折り返したり、逆に折り返さずにコンテナからはみ出したりすることがよくあります。

このようなテキストの表示問題は、ユーザー体験を損なうだけでなく、UIの美観や機能性にも悪影響を及ぼします。例えば、 * 長い商品名や見出しが途中で不自然に改行されてしまう。 * 短い説明文が1行に収まらず、デザインが崩れてしまう。 * テキストがコンテナからはみ出し、読めなくなってしまう。

といった問題が発生します。

これらの問題を未然に防ぎ、レイアウトを最適化するためには、「このテキストはこの幅に収まるか？」または「このテキストは指定の幅で折り返しが発生するか？」を事前に、あるいは表示後に動的に判定する仕組みが必要になります。JavaScriptを用いることで、このような動的なテキスト表示の制御が可能になります。

JavaScriptでテキストの折り返しを判定する具体的な方法

JavaScriptでテキストの折り返しを判定する方法はいくつかありますが、ここでは主にDOM要素のプロパティを利用する方法と、より厳密な測定を行うための方法を紹介します。

方法1: 既存のDOM要素のscrollWidthとclientWidthを利用する

すでにHTMLに表示されている、あるいは表示される予定の要素が折り返しを起こしているかどうかを判定する最も一般的な方法です。

  • scrollWidth: 要素のコンテンツが完全に収まるのに必要な最小の幅（パディングは含むが、ボーダーやスクロールバーは含まない）。テキストが折り返している場合、この値はテキストの全幅を示す。
  • clientWidth: 要素の表示領域の幅（パディングは含むが、ボーダー、スクロールバー、マージンは含まない）。

この二つのプロパティを比較することで、テキストが折り返しているか、あるいはオーバーフローしているかを判定できます。

Javascript

/**
 * 指定されたHTML要素内のテキストがオーバーフローしているかどうかを判定します。
 * (テキストがコンテナの幅を超えて折り返しているか、あるいは切り詰められているか)
 * @param {HTMLElement} element - 判定するHTML要素
 * @returns {boolean} テキストがオーバーフローしている場合はtrue、そうでない場合はfalse
 */
function isTextOverflowing(element) {
    if (!element) {
        console.warn("isTextOverflowing: Element is null or undefined.");
        return false;
    }

    // 要素のスタイルがdisplay: noneの場合、clientWidthやscrollWidthが0になるため、
    // 一時的にvisibility: hiddenなどで表示状態にして測定するなどの工夫が必要
    // ただし、display: blockなどの状態で通常に表示されている前提
    return element.scrollWidth > element.clientWidth;
}

// 使用例
const myElement = document.getElementById('myParagraph');
if (myElement) {
    if (isTextOverflowing(myElement)) {
        console.log("テキストがオーバーフローしています。");
        // 例: テキストを切り詰めて表示し、ツールチップで全文表示する
        myElement.style.whiteSpace = 'nowrap';
        myElement.style.overflow = 'hidden';
        myElement.style.textOverflow = 'ellipsis';
        myElement.title = myElement.textContent; // 全文をツールチップに設定
    } else {
        console.log("テキストは収まっています。");
    }
}

この方法はシンプルで強力ですが、要素が既にDOMに存在し、可視状態であることが前提です。

方法2: 一時的な要素を作成してテキストの折り返しを事前に測定する

HTMLにまだ追加されていないテキスト、あるいは特定のスタイルを適用した場合にどのように表示されるかを「事前に」判定したい場合に有効な方法です。これは、実際のDOMに影響を与えずに測定できるため、パフォーマンスの面でも有利です。

ステップ1: 測定用のダミー要素を作成する

まずは、測定したいテキストを格納するためのダミー要素をJavaScriptで作成します。この要素は画面に表示されないようにスタイルを設定します。

Javascript

/**
 * 指定されたテキストが、特定のスタイルとコンテナ幅で折り返すかどうかを事前に判定します。
 * @param {string} text - 測定したいテキスト
 * @param {string} containerWidth - テキストを収めたいコンテナの幅 (例: '200px', '50%')
 * @param {object} styles - テキストに適用するCSSスタイル (例: { fontSize: '16px', fontFamily: 'Arial' })
 * @returns {boolean} テキストが指定された幅で折り返す場合はtrue、そうでない場合はfalse
 */
function willTextOverflow(text, containerWidth, styles = {}) {
    // 1. ダミー要素を作成
    const dummyElement = document.createElement('div');

    // 2. 画面に表示されないようにスタイルを設定
    // position: absolute; でレイアウトから除外し、
    // visibility: hidden; で見えなくし、
    // white-space: nowrap; で初期の折り返しを防ぎ、textContentの自然な幅を測定可能にする
    // overflow: hidden; は、コンテンツがはみ出してもスクロールバーを生成しないように
    dummyElement.style.cssText = `
        position: absolute !important;
        visibility: hidden !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important; /* padding, borderを含まないclientWidthを得るため */
        max-width: ${containerWidth}; /* 判定したいコンテナの最大幅を設定 */
    `;

    // 3. 測定したいテキストとスタイルを適用
    dummyElement.textContent = text;
    for (const prop in styles) {
        dummyElement.style[prop] = styles[prop];
    }

    // 4. bodyに一時的に追加して測定
    document.body.appendChild(dummyElement);

    let overflow = false;
    // 最初に white-space: nowrap でテキストの自然な幅（折り返さない状態）を測定
    const naturalWidth = dummyElement.scrollWidth;

    // 次に、指定されたコンテナ幅での `clientWidth` を取得
    // ここでは `max-width` を設定しているので、`clientWidth` は指定幅以下になる
    // `scrollWidth` はコンテナ幅に関わらず、コンテンツの自然な幅
    if (naturalWidth > dummyElement.clientWidth) {
        // 自然な幅がコンテナ幅より大きい場合、折り返しが発生する可能性がある
        // 実際に折り返しが発生するかどうかは、white-spaceをnormalに戻して確認
        dummyElement.style.whiteSpace = 'normal'; // 測定したい折り返しルールに戻す
        // clientHeightの変化をチェック
        // 折り返しが発生すると、同じ幅でも高さが増加する
        const singleLineHeight = parseInt(getComputedStyle(dummyElement).lineHeight);
        const currentHeight = dummyElement.clientHeight;

        // currentHeightが単一行のlineHeightより大きい、または複数の行がある場合
        // ただし、line-heightが'normal'の場合、数値化が難しい
        // 確実なのは、スクロール幅とクライアント幅を比較
        // 自然な幅(nowrap)が設定幅を超えていれば、折り返しが発生すると判断
        overflow = (naturalWidth > parseInt(containerWidth) || naturalWidth > dummyElement.clientWidth);
    }

    // 5. ダミー要素をDOMから削除
    document.body.removeChild(dummyElement);

    return overflow;
}

ステップ2: 測定と判定

上記のwillTextOverflow関数を使用します。

Javascript

// 使用例
const textToMeasure = "この長いテキストが指定された幅で折り返すかどうかを判定します。長いテキスト、長いテキスト、長いテキスト...";
const containerWidth = "200px";
const textStyles = {
    fontSize: '16px',
    fontFamily: 'Arial, sans-serif',
    lineHeight: '1.5'
    // その他、テキスト表示に影響するスタイル
};

if (willTextOverflow(textToMeasure, containerWidth, textStyles)) {
    console.log(`「${textToMeasure.substring(0, 20)}...」は${containerWidth}で折り返します。`);
    // 折り返す場合はテキストを短縮して表示するなどの処理
} else {
    console.log(`「${textToMeasure.substring(0, 20)}...」は${containerWidth}に収まります。`);
}

const shortText = "短いテキスト";
if (willTextOverflow(shortText, containerWidth, textStyles)) {
    console.log(`「${shortText}」は${containerWidth}で折り返します。`);
} else {
    console.log(`「${shortText}」は${containerWidth}に収まります。`);
}

補足：CanvasのmeasureTextについて Canvas APIのmeasureTextは、テキストのピクセル単位の幅を測定できます。しかし、これは純粋なテキストの幅であり、HTML要素のpadding、border、box-sizing、white-space、overflowといったCSSプロパティや、実際のブラウザのレンダリングエンジンによる改行ルール（単語区切り、ハイフネーションなど）を考慮しません。そのため、正確な「折り返し判定」には向かず、どちらかというと「このテキストは指定のフォントサイズで何ピクセル幅になるか」を知りたい場合に有効です。HTML要素のレイアウト判定には、上記のscrollWidthとclientWidthの比較がより適切です。

ハマった点やエラー解決

  • display: noneの要素の測定: display: noneの要素はclientWidthやscrollWidthが0になるため、正確な測定ができません。一時的にvisibility: hiddenやopacity: 0など、レイアウトに影響を与えずに非表示にする方法を用いる必要があります。
  • スタイルの不一致: 測定したいテキストに適用されるCSSスタイル（font-size, font-family, line-height, letter-spacing, word-spacingなど）が、ダミー要素に正確に適用されていないと、誤った測定結果になります。特にfont-familyは重要で、フォントによって文字の幅が大きく異なるため、必ず指定するようにしましょう。
  • box-sizingの影響: box-sizing: border-box;とbox-sizing: content-box;の違いもclientWidthやscrollWidthの計算に影響を与えます。ダミー要素ではbox-sizing: border-box;を明示的に設定し、パディングやボーダーを含まないclientWidthを測定できるようにすると良いでしょう。
  • DOM操作のパフォーマンス: 頻繁にダミー要素を作成・追加・削除するとパフォーマンスに影響が出ることがあります。特にアニメーション中やスクロールイベント中に何度も呼び出す場合は注意が必要です。必要に応じてデバウンスやスロットリングを検討しましょう。

解決策

上記の「方法2: 一時的な要素を作成してテキストの折り返しを事前に測定する」で示したwillTextOverflow関数は、これらの問題を解決するための考慮が含まれています。 * position: absolute !important; visibility: hidden !important; を使用してDOMフローから分離し、かつ非表示にする。 * padding: 0 !important; margin: 0 !important; border: 0 !important; box-sizing: border-box !important; を設定し、スタイルをリセットして純粋なコンテンツ領域の測定を可能にする。 * white-space: nowrap !important; で最初にテキストの自然な幅を測定し、その後にmax-widthと合わせてscrollWidthとclientWidthを比較することで、折り返しが発生するかどうかを判断します。

これにより、より正確かつ安全にテキストの折り返しを事前に判定することができます。

まとめ

本記事では、JavaScriptを使用してHTMLテキストの折り返しを事前に、あるいは動的に判定する方法を解説しました。

  • 既存の要素の判定: HTMLElement.scrollWidthとHTMLElement.clientWidthを比較することで、要素内のテキストがオーバーフローしているかどうかを判定できます。element.scrollWidth > element.clientWidthであれば、テキストがコンテナの幅を超えていると判断できます。
  • 事前の折り返し判定: DOMにまだ追加されていない、または特定のスタイルを適用した場合のテキストの折り返しは、一時的なダミー要素をDOMに作成し、必要なスタイルを適用してscrollWidthとclientWidthを測定することで事前に判断できます。この際、ダミー要素は画面に影響を与えないようにposition: absolute; visibility: hidden;などのスタイルを適用することが重要です。
  • スタイルの厳密な適用: 正確な測定のためには、測定対象となるテキストに適用されるべきフォントサイズ、フォントファミリー、行の高さ、文字間隔など、全ての関連するCSSスタイルをダミー要素にも厳密に適用することが不可欠です。

この記事を通して、WebアプリケーションのUI/UX品質向上に役立つテキスト表示制御のテクニックを習得いただけたかと思います。テキストの折り返しを適切に管理することで、ユーザーにとってより見やすく、使いやすいインターフェースを提供できるようになります。

今後は、ResizeObserver APIを活用して要素のリサイズ時にテキストの折り返しを動的に再評価する方法や、CSSのtext-overflow: ellipsis;といったプロパティとJavaScriptの連携について掘り下げた記事も執筆する予定です。

参考資料