テキストの重なりと改行を規制する

デフォルトでは、テキストの折り返しは、スペースやダッシュがある場合など、特定の状況でのみ行われます。これにより、コンテナー要素を超える長い文字列や一連の文字 (URL など) の設計と配置に問題が生じる可能性があります。

単語区切り、行区切り、オーバーフロー折り返し機能を利用することで、要素内でテキストを分割して折り返す方法を制御できます。これにより、さまざまなデバイスのサイズや方向での読みやすさが向上し、言語固有の要件に従ってテキストが適切に折り返されることが保証され、サイトでシームレスな多言語サポートが実現します。

このチュートリアルでは、以下の知識を習得します。

1. 単語分割の応用
2. 改行の使用
3. テキスト折り返しの実装
4. よくある質問（FAQ）

単語分割の適用方法

単語の区切り (「word-break」CSS プロパティ) を使用すると、デフォルトの改行動作を変更し、オーバーフローする可能性のあるテキスト内で改行が発生する場所を指定できます。単語の区切りを使用すると、複合語を含むコンテンツで不自然な改行を防止したり、言語固有の規制に準拠して正しい視覚的表現を確保し、国際的なユーザー エクスペリエンスを向上したりできます。

単語の分割には 3 つのオプションがあります。

• 普通 – 単語の区切りの標準ルールに従うデフォルト設定（スペースまたはハイフンで区切る）
• すべてを破る – オーバーフローを防ぐため、任意の単語または文字が次の行に分割されることがあります（中国語/日本語/韓国語のテキストを除く）
• すべて保ちます – 中国語、日本語、韓国語（CJK）テキストの場合、コンテンツがオーバーフローしても単語はそのまま残ります。非CJKテキストの動作は、 普通

プロのヒント: 単語区切りプロパティの詳細とこれらのオプションのプレビューについては、 MDNウェブdocs.

単語の区切り方

単語区切りを設定する前に、キャンバスにテキスト コンポーネント (リッチ テキスト、段落など) を導入する必要があります。

単語区切りを設定するには:

1. キャンバス上のテキストコンポーネントを強調表示します
2. に移動 スタイルパネル > タイポグラフィ > その他のタイプオプション > 速報
3. 単語区切りオプションを選択します 言葉 ドロップダウン（例：標準、すべて解除、すべて保持）

他のスタイル属性と同様に、親要素またはブレークポイントに単語の区切りを適用し、子要素または別のブレークポイントでそれを上書きすることができます。

注記： 公開されたサイトで予期しない動作が発生しないようにするには、存在するカスタム単語区切り CSS を必ず削除してください。

改行の活用方法

Webflow の改行 (CSS では「空白」プロパティと呼ばれます) は、空白文字 (つまり、他の文字間の水平または垂直のスペースを表す文字) と改行文字 (つまり、改行を表す空白文字) の処理を制御し、テキストが折り返されるかオーバーフローするかを決定します。

改行には 6 つのオプションがあります。

• 普通 – 空白のシーケンスを圧縮し、必要に応じてテキストを次の行に折り返すデフォルト値
• ラップなし – Normalと同様に空白を圧縮しますが、テキストがスペースを超えても折り返さずに1行にテキストを保持します。
• 前 – 空白と改行を保持し、HTMLソースコードどおりにテキストを表示します
• プレラップ – 必要に応じてテキストを次の行に折り返しながら空白を保存します
• プレライン – 空白を圧縮し、改行を維持し、必要に応じてテキストを折り返すことができます
• スペース – 空白のシーケンスを維持し、任意の時点でテキストの折り返しを可能にし、末尾のスペースを保持します

プロのヒント: 空白プロパティの詳細な理解とこれらのバリエーションのプレビューについては、 MDNウェブdocs.

改行を設定する方法

改行を設定する前に、キャンバスにテキスト要素 (リッチ テキスト、段落など) を導入します。

改行を設定するには:

1. キャンバス上のテキスト要素を選択する
2. アクセス スタイルパネル > タイポグラフィ > その他のタイプオプション > 速報
3. 改行オプションを選択します ライン ドロップダウン (例: 標準、折り返しなし、前、折り返し前、前行、スペース)

他のスタイル属性と同様に、親要素またはブレークポイントに改行を適用し、子要素または別のブレークポイントで改行を変更できます。

注記： 公開されたサイトで予期しない動作を回避するには、カスタムの空白 CSS が削除されていることを確認してください。

テキストの折り返しを適用する方法

テキストの折り返し (「overflow-wrap」CSS プロパティ) を使用すると、単語がコンテナーの幅を超えたときにどのように折り返すかを決定できます。これにより、単語がコンテナー内の最も近い適切なポイントで分割され、デザインの整合性と美観が維持されます。

ラッピングには 3 つのオプションがあります。

• 普通 – 標準的な改行ルールに従ったデフォルト設定（単語のスペースまたはハイフンで改行する）
• どこでも – オーバーフローを防ぐために、他の区切り文字がない行では、区切り文字のない文字列（URLや長い単語など）を任意の時点で区切ることができます。
• 単語を区切る – 同様の機能を持つ どこでも オプションにより、行内に他の許容可能な区切り点がない場合、通常は分割できない単語を任意のポイントで分割できます。

プロのヒント: overflow-wrapプロパティに関する追加情報やこれらの選択肢のプレビューについては、 MDNウェブdocs.

ラッピング動作を設定する方法

折り返し動作を設定する前に、キャンバスにテキスト要素 (リッチ テキスト、段落など) を追加します。

ラッピング動作を構成するには:

1. キャンバス上のテキスト要素を選択する
2. アクセス スタイルパネル > タイポグラフィ > その他のタイプオプション > 包む
3. 折り返しオプションを選択します（例：標準、任意の場所、単語の区切り）

他のスタイル属性と同様に、親要素またはブレークポイントにラッピングを適用し、子要素または別のブレークポイントでそれを変更できます。

注記： 公開されたサイトで予期しない動作が発生しないようにするには、カスタムの overflow-wrap CSS が削除されていることを確認してください。

よくある質問

単語の区切りと行の区切りの違いは何ですか?

単語の区切りと行の区切りはどちらも、ページ上のテキストの表示に影響します。行の区切りは、空白文字の管理方法と、テキストがオーバーフローするか折り返されるかを決定します。単語の区切りは、テキスト内の単語の断片化と折り返しを制御します。単語の区切りは、URL や特定の単語分割ルールを持つ言語 (中国語、日本語、韓国語など) に特に役立ちます。

単語分割オプションとして「break-word」が使用できないのはなぜですか?

によると CSS仕様「word-break: break-word」は非推奨となり、「overflow-wrap: break-word」が推奨されます。ただし、折り返しの目的で「break-word」を利用することはできます。