CSS3テキストの折り返し

テキストの折り返しは、実際には非常に一般的ですが、目立たない機能です。何も設定する必要はありません。ブラウザが自動的に行を折り返します。たとえば、英語の場合、ブラウザはコンテナのサイズに基づいて行を半角スペースまたはハイフンで折り返すかを選択します。たとえば、中国語の場合、ブラウザはテキストまたは句読点を折り返すことを選択します。しかし、長い単語や URL に遭遇すると、ブラウザーがあまり賢くなく、コンテナーがバーストして見苦しくなることがあります

コンテナーの幅が 150px であるという前提の下では、左に示すような通常のテキストです。ブラウザにはこれで十分です。 自動行折り返し機能により、右側の画像が長い単語や URL に遭遇すると、ブラウザは失敗します。もちろん、コンテナーに overflow:auto; を設定して、コンテナーのバーストを避けるためにスクロール バーを表示できるようにすることもできます。または、下の図に示すように、単純に overflow:hidden; で余分な部分を非表示にします

しかし、私は常々、overflow は理想的ではなく、改行専用の属性が必要であると感じています。この記事では3種類の行折り返しプロパティを紹介します

word-wrap
word-break
white-space
word-wrap
word-wrapでは単語分割と改行を実現できます。ノーマルワードとブレークワードを設定できます。デフォルト値の Normal は設定されていないことに等しいため、これ以上の詳細は説明しません。 Break-word では、単語の区切りと改行を許可します。右図のように、word-wrap:break-word;を設定すると、ブラウザ実行処理：デフォルトの改行規則により、長い単語が表示できないことがわかります。そのため、おっとの後ろにも空白があり、長い単語を2行目に移動しても表示されなかったので、単語を改行して改行しました。その結果、長い単語や URL は途中で切り捨てられました。

word-break
word-break は、ブラウザが自動的に行を折り返す方法を設定できます。通常、ブレークオール、キープオールに設定できます。デフォルト値の Normal は設定されていないことに等しいため、これ以上の詳細は説明しません。 Break-all は、コンテナのサイズに基づいて単語の区切りを許可するブラウザの改行モードを設定します。上記の word-wrap:break-word との違いは何ですか?下の写真、青い線を見てください。

左の図のワードラップの改行ワードはブラウザのデフォルトの改行方法に従っているので、「おっとっと」の後に空白が入っています。詳細には立ち入らないでください。右図のword-breakのbreak-allは、ブラウザのデフォルトの改行方法を変更し、ブラウザが半角スペースを無視してコンテナのサイズに応じて直接改行できるようにするため、長い単語が出現した場合に対応します。 、単語の区切りは直接分割されます。実際、word-break:break-all; は word-wrap:break-word; よりもページ スペースを節約します。

keep-all は単語の分割を許可しません。英語ベースの状況では、仮説がないことと同じです。中国語、日本語、韓国語の場合、通常とすべて保持には違いがあります。下の図を参照してください

中国語、日本語、韓国語の場合、通常は依然として設定なしを意味し、ブラウザが選択しますテキストまたは句読点を折り返すには。ただし、すべてキープに設定すると、単語の分割は (中国語、日本語、韓国語であっても) 許可されなくなり、改行は英語と同様に半角スペースまたは句読点に基づいてのみ行うことができます。
white-space

white-space は、空白文字と改行文字を設定します。デフォルト値はノーマル、プリ、ナラップ、プリライン、プリラップが設定可能です。効果は下の図に示されています

//xxx を対応する値に置き換えます
おっと、あまりにもすごすぎる!

4 勝したチームまずはNBAチャンピオンになるだろう。

通常、ブラウザはデフォルトで余分な空白文字 (複数の空白文字を表示するには、スペースバーの代わりに使用してください) と改行文字を無視します。

pre は、

 タグと同等の空白文字と改行文字を保持します。 1行目の改行をなくすには、HTML側を次のように変更して余分な空白行を削除するのが一般的です<p></p><p style="white-space: pre;">おっとっと!<br>1つ目4試合勝てば、チームはNBAチャンピオンシップに勝つだろう。 <br></p><p>//または</p><p></p><p style="white-space: pre;"><!-- <br/>--> うおおおおおおおおおおおおお！<br> 4 試合先勝したチームNBAチャンピオンになるでしょう。 <br></p><br>nowrap と通常の違いは、自動的にラップされないことです。 text-overflow 属性を使用する場合、それを機能させるには、white-space: nowrap; および overflow: hidden; と連携する必要があります。<p> 余分な空白文字は無視されます (複数の空白文字を表示するには、代わりに使用してください)スペースバーの)、ただし、改行文字を保持すると、自動的に折り返されます</p><p>pre-wrapとpre-lineの違いは、余分な空白文字を保持することです</p><p>概要<br></p><pre class="brush:php;toolbar:false">タグ内にソースコードを表示する場合、url属性があると非常に長くなり、ページが表示されなくなります。 (特にモバイル端末の場合)、空白: pre-wrap; プラス word-wrap: <p></p><pre class="brush:php;toolbar:false"> を使用できます。 -wrap: Break- word;<p>改行を強制しないようにするには、white-space: nowrap; plus word-break: keep-all;</p><p><br></p><p> CSS3 テキストの改行関連の記事については、PHP を参照してください。中国語のサイトです！ </p><p class="comments-box-content"></p>