テキスト表示でスペースが空行になる問題の対処法

はじめに

テキストエリアやラベルに文字列を表示する際、「改行 + スペースでインデント」を入れたつもりが、空行が挿入されてしまうという問題に遭遇しました。今回はその原因と対処法をまとめます。

発生した問題

やりたかったこと

JSONファイルで管理している文字列を画面に表示する際、箇条書き部分で改行しインデントを揃えたい。

    "message": "・あいうえお\\n　かきくけこさしすせそ..."

期待する表示

・あいうえお
　かきくけこさしすせそたちつてと...

画面に表示される実際の文字列

・あいうえお

かきくけこさしすせそたちつてと...

全角スペースが消えて空行になってしまうという現象が発生しました。

原因の分析

レンダリング処理の流れ

その１ - 文字列を受け取る

   "・あいうえお\n　かきくけこさしすせそたちつてと..."

その２ - レンダリング時の解釈

   ・あいうえお
   [改行]
   [全角スペース] ← 孤立状態
   かきくけこさしすせそたちつてと...

その３ - 全角スペース直後の文字列が長すぎて途中で自動折り返しが発生

・あいうえお
　かきくけこさしすせそたちつてと...(非常に長い文字列)
　↓ テキストエリアの幅を超えて自動折り返し

このとき、全角スペースが孤立した状態になりレンダリングエンジンが「空白のみの行」と判断され、スペースが削除されました。

対策

自動折り返し前に明示的に改行を入れる

{
  "message": "・あいうえお\\n　かきくけこ\\n　さしすせそたちつてと..."
}

対策方法

• インデント後の文字列を自動折り返しが発生しない長さに保つ
• レンダリングエンジンが「全角スペース + 文字列」を1つの行として認識
• 全角スペースが「行頭のインデント」として正しく機能

結果として期待した表示となりました。

・あいうえお
　かきくけこ
　さしすせそたちつてと...

関連する技術概念

• 空白文字の正規化（Whitespace Normalization）
  → レンダリング時に連続する空白を縮約する処理

• 前処理での空白除去（Whitespace Trimming）
  → 行頭・行末の空白を削除する処理

• 自動折り返し（Word Wrap / Soft Wrap）
  → テキストエリアの幅に応じて自動的に改行する機能

まとめ

今回の事象により、以下の２点を学びました。

• 「改行 + インデント」を使う場合、インデント後の文字列が自動折り返しされない長さに収める
• 適切な位置で明示的に改行を制御し、自動折り返しに依存しない

また、今回の経験は以下のような場面でも役立ちます

• HTML/CSSでのテキスト表示
• モバイルアプリのラベル表示
• 組み込み系デバイスのUI
• チャットボットのメッセージ整形

おわりに

テキストレンダリングは、普段意識しない部分だからこそ問題に遭遇すると原因がわかりにくいです。

参考記事

テキスト折り返しと改行の基礎

• CSSでテキストの改行ルールを制御するには？コード付きでわかりやすく解説！ - WEBCAMP MEDIA
  [word-breakプロパティによる自動改行の制御方法]

• 【完全ガイド】CSSのテキストラッピングプロパティ解説 - Qiita
  [overflow-wrap、word-break、white-spaceの使い分け]

• overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
  [自動折り返しが効かないケースとその対処法]

テキストレンダリングの仕組み

• White-space processing in XAML - Microsoft Learn
  [空白文字の正規化（Whitespace Normalization）の仕組み]

• XAML and whitespace - Microsoft Learn
  [テキストレンダリング時の空白処理のルール]