× 目次 [1]white-space [2]word-wrap [3]word-break
CSS3 では、word-wrap と word-break という 2 つの新しい改行プロパティが追加されました。空白文字と改行について一緒に説明しますが、実際には空白文字には改行が含まれており、改行を行わない一般的なテキストには空白文字の属性 (white-space: nowrap;) が使用されますが、他にどのような属性値があるのでしょうか。対応する使い方はありますか？この記事では、空白文字と改行の内容を詳しく紹介し整理していきます
定義
空白文字とは、スペース、タブ、キャリッジリターンを指します。HTML では、すべての空白文字が 1 つに統合されています。デフォルトのスペース。
white-space
値：normal | pre-wrap | pre-line
適用対象：すべての要素継承：Yes
normal: 合并空白符，允许自动换行nowrap: 合并空白符，不允许自动换行pre-line: 合并空白符(不包括换行符)，允许自动换行pre: 不合并空白符，不允许自动换行pre-wrap: 不合并空白符，允许自动换行
]
要素には、デフォルトで空白のスタイルがあります: pre;<p class="sycode"> </p> [注意] IE7 ブラウザは、pre-line と pre-wrap の 2 つの属性値をサポートしていません <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><div>They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.</div>
テキストの折り返し
ブラウザ自体にテキストの自動行折り返しの機能があり、テキストコンテナの右側で自動行折り返しを実現できます
中国語の場合、テキストの後で改行することはできますが、ブラウザが句読点に遭遇すると、通常は句読点と前のテキスト全体が改行されます
実際、空白は問題を解決します。 word-wrap 属性は、長い単語や URL アドレスを自動的にラップするために使用されます。 -space は nowrap または pre、word-break 属性と word-wrap 属性は無効です
【注意】word-wrap は標準では overflow-wrap に変更されましたが、互換性の問題により word-wrap
CSS3では自動行折り返しの処理方法を決定するために
word-breakが一般的に使用されます。特定の属性設定により、ブラウザは半角スペースやハイフンの後に改行を実装できるだけでなく、任意の位置で改行を実装することもできます。値：normal | keep-all
初期値：normal
適用対象：すべての要素
継承：yes
word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)word-wrap:break-word(截断单词换行，长单词从下一行开始)
【注意】モバイル端末は現在keep-all Valueをサポートしていません
[注意] word-break 値がbreak-allの場合、word-wrap属性は無効になります。それ以外の場合は両方の属性が機能します
Table
表のセル内の長いテキストの場合は、Word-WRAPまたはWORDを使用します-BREAK 行の変更を強制してテーブル レイアウトを設定する: 修正済み
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
