HTMLとCSSでデフォルトのテキストの折り返しを変更する方法
紙とは異なり、Webページは ほぼ無限に横に伸びる. それは印象的なことですが、それは私たちが読書中に本当に必要とするものではありません。ブラウザはに応じてテキストを折り返します。 テキストコンテナの幅 そしてその 画面の幅 横にスクロールしなくてもすべてのテキストを見ることができるように（下方向のみ）.
ラッピング テキストの言語や句読点やスペースの配置など、ブラウザが多くの要素を考慮して行うものです。 ただ押し下げるな テキストコンテンツ用に定義されたボックスに収まらないもの.
ラッピング以外にも、ブラウザも スペースを大事にする;それらは、ソースコード内の複数の連続したスペースをレンダリングされたページ上の1つの単一スペースにマージし、またラッピング作業を始める前に強制改行を登録します。.
デフォルトのテキストの折り返しを変更する場合
それはすべて素晴らしいことであり、とても感謝しています。しかし、デフォルトのブラウザの動作が私たちが探しているものではない状況では、簡単に終わることがあります。それはその見出しかもしれません 包まれるべきではありません または段落内の単語 行を降りるよりも壊れたほうがいい, 行末に奇妙に見える空のスペースを残す.
私たちが必死になっているだけではないかもしれません 私たちのテキストに保存されているスペースが必要です, しかし、ブラウザはそれらを1つにまとめ続け、複数を追加することを強制します。 ソースコード内.
好みを包むことも テキストの言語と目的によって変わる. 北京語のニュース記事とフランス語の詩は、必ずしも同じ方法でくるむ必要はありません。.
可能なCSSプロパティ（およびHTML要素！）は多数あります。 折り返しとブレークポイントを制御する そしてまた 折り返す前にスペースと改行を処理する方法を定義する.
ソフトラップの機会とソフトラップの休憩
あふれたテキストをどこで折り返すかをブラウザが決める 単語の境界、ハイフン、音節、句読点、スペースなどに応じて. これらの場所はすべて呼ばれています ソフトラップの機会 ブラウザがそのような場所でテキストを改行するとき、改行は ソフトラップブレイク.
最も簡単な方法 余分な休憩を強制する 古き良き人を使ってできること
空白
あなたがに精通している場合 余白 あなたがたぶんCSSプロパティ私はあなたが最初に他の多くのものと同じ方法でそれを知るようになったと思います。方法を探している間 テキストの折り返しを防ぐ. の ナラップ の値 余白 まさにそれを行う.
しかし 余白 財産は単に包むこと以上のものです。まず第一に、空白は何ですか？それは スペース文字のセット. セット内の各スペース 互いに異なる 長さ、方向、またはその両方.
典型的な 単一の水平スペース文字 スペースキーを押して追加します。 Tabキーでも 同じようなスペースだが、長さが大きい. Enterキーを押すと 縦スペース 改行する HTMLで 壊れないシングルスペース Webページに。このように、たくさんの種類のスペースがあります。 “空白”.
冒頭で述べたように、ブラウザ 複数のスペースを折りたたむ ソース内の（水平方向と垂直方向の両方）単一のスペースに。彼らもまた 機会を包むためにこれらのスペース文字を考慮する 折り返しが必要な場合（テキストを折り返すことができる場所）.
そして、私たちがコントロールできるのはまさにこれらのブラウザアクションです。 余白. そのことに注意してください 余白 プロパティはすべての種類のスペースに影響を与えるわけではありません, 最も頻度の高いものだけ 通常の横方向のシングルスペース、タブスペース、改行など.
以下に、サンプルテキストのスクリーンショットを見ることができます。 そのコンテナ内に収まるようにブラウザによってラップされる. オーバーフローはコンテナの下部で発生し、オーバーフローしたテキストは異なる色で表示されます。あなたは気づくでしょう 連続したスペースの崩壊 コード内.
×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちはâÂ？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは.
.textContainer 幅：500ピクセル;高さ：320ピクセル。
申し込み後 空白：ナラップ。 規則では、テキストの折り返しは次のように変わります。
.textContainer / *…* /空白：nowrap;
の プレ の値 余白 すべての空白を保持 そして テキストの折り返しを防止します：
.textContainer / *…* /空白：プレ。
の プリラップ の値 余白 すべての空白を保持 そして テキストを折り返す：
.textContainer / *…* /空白：プリラップ。
最後に、 プレライン の値 余白 垂直方向の空白を保持 改行など テキストを折り返す：
.textContainer / *…* /空白：プレライン。
ワードブレイク
テキストの折り返しを制御するために知っておくべきもう1つの重要なCSSプロパティは ワードブレイク. あなたは上記のスクリーンショットすべてでブラウザがそれを見ることができます 単語の前のテキストを折り返した “こんにちは” 右側に テキストがオーバーフローしました. ブラウザ 言葉を壊さなかった.
しかし、あなたが する必要がある 単語内の文字を分割することを許可する テキストがあなたが使用する必要がある右側にも見えるように 破る の値 ワードブレイク プロパティ：
.textContainer / *…* / word-break：break-all;
の ワードブレイク プロパティに加えて3番目の値があります 破る そして 普通の （デフォルトの改行に属します）。の すべて保ちます 値 言葉を壊すことはできません.
あなたはの効果を見ることができないかもしれません すべて保ちます 英語で。しかし、単語の中の文字が 意味のある単体, ブラウザは折り返すときに単語を壊すかもしれません、そしてこれはを使用して防ぐことができます すべて保ちます.
例えば、 韓国語の単語, ラッピングのため最初は壊れています, 一緒に保たれている とき 空白：キープオール。 ルールが指定されている.
׬¸ת³？？？¥Â¼  -  - ¥Â？？？？ ××××××××׬ÂÂÂÂÂÂ??Â??¬½????? ???¡Â？ ××××׬Â??¬Â？？？¬Â¤. ׬?? 10×-10 ??? ׬ÂÂÂÂÂÂ??Â??¬½？？？ תµ - ׬Â？ ××××׬Â？？？ªÂ°Â？ 1997年……？ 3׬Â？？？ 10׬¼׶°°12°¬Â¼×ªÂ¹Â？¬Â§Â？ ………？¬Â¼×¬Â？？？ קÂ？¬Â¸×¬Â¦Â？¬Â？Â？¬Â？？？ ׬´צ½×××××××פ. ׬§Â？ªÂ¸Â？ ±±Â«¡Â？？？？¬Â??¬Â？？？¬Â¤. ׬´ ××××׬Â？？？¬Â？Â？¬Â??? ??? ׬……ת³Â？ ׬°Â??¬Â？？？ ׬???¬Â¸×ª？？？？？？¤×¬Â´ Â？？？¨×ªÂ»Â？ ת¨׬¬ ×？？¤×¬Â？？？ªÂ³Â¼ ת°Â？¬Â？？？ ׶Â？¬Â¼×¥Â¼ ×？？¤Â£Â¹×××××××פ.
.textContainer / *…* / word-break：keep-all;
このプロパティは別の値をサポートするかもしれません 休憩 将来は。あなたはどのように見えるでしょう 休憩 後で動作する “オーバーフローラップ” この記事のセクション.
ワードブレイクの機会
開発者も 単語の中に折り返しの機会を追加する, を使用して
×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？ Hello×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは。 ×¢Â？？？こんにちは.
.textContainer / *…* /空白：プリラップ。
なし
ハイフン
の ハイフン CSSプロパティは 文字間の区切りを制御する別の方法 一言で。興味があれば、CSSハイフネーションに関する記事を別に用意しています。要するに、プロパティはあなたがすることができます ハイフネーションによってラッピングの機会を創り出す.
その 自動 valueはブラウザにプロンプトを出します 必要に応じて自動的にハイフンを付けて単語を分割します 折り返しながら。の マニュアル 値はブラウザを強制的に 必要に応じて、私たちが追加したハイフネーションの機会に折り返す, ハイフン文字（‐または） （ソフトハイフン）もし 無し 存在する価値として与えられた ハイフンの近くは折り返さない.
ブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウス
.textContainer / *…* / -webkit-hyphens：auto; -ms-hyphens：auto;ハイフン：自動。
オーバーフローラップ
の オーバーフローラップ CSSプロパティは、 ブラウザは言葉を壊すかもしれない （または、保存されたスペース。近いうちにサポートが行われる可能性があります） オーバーフロー時. ときに 休憩 値は オーバーフローラップ, 言葉 壊れる 万一に備えて 他のソフトラップの機会は見つかりません 並んで.
ご了承ください オーバーフローラップ としても知られています ワードラップ （それらはエイリアスです）.
ブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウスブルーハウス
.textContainer / *…* / overflow-wrap：break-word;
上記のHTMLコード内の文字の間にスペースがない（つまり、折り返す機会がない）場合、テキストは最初は折り返されず、 一語として保存されていた.
ただし、単語を分割してテキストを折り返すことが許可されている場合（例： 休憩 に値が与えられた オーバーフローラップ） 文字列全体を壊すことによって折り返しが行われた 必要なときはいつでも.
