CSS_html/css_WEB-ITnose の空白と改行についての深い理解

× 目次 [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='brush:php;toolbar:false;'><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 行の変更を強制してテーブル レイアウトを設定する: 修正済み