CSS3 テキストの折り返し_html/css_WEB-ITnose

テキストの折り返しは、実際には非常に一般的ですが、目立たない機能です。何も設定する必要はありません。ブラウザが自動的に行を折り返します。たとえば英語の場合、ブラウザはコンテナのサイズに基づいて行を半角スペースまたはハイフンで折り返すかを選択します。たとえば、中国語の場合、ブラウザはテキストまたは句読点を折り返すことを選択します。しかし、長い単語や 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 は、英語ベースの状況では単語の分割を許可しません。これは、仮説がないことと同じです。中国語、日本語、韓国語の場合、通常とすべて保持の違いがあります。下の図を参照してください

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

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

<div style="white-space: xxx;">    //xxx替换相应的值Ooops       too    loooooooooooooooooooooong!<br>首先胜出四场的球队将获得NBA总冠军。</div>

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

pre は、

 タグと同等の空白文字と改行文字を保持します。 1行目の改行文字をなくすには、HTML側で以下のように変更して余分な空白行を削除するのが一般的です</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><div style="white-space: pre;">Ooops too loooooooooooooooooooooong!首先胜出四场的球队将获得NBA总冠军。</div>//或者<div style="white-space: pre;"><!-- --> Ooops too loooooooooooooooooooooong!首先胜出四场的球队将获得NBA总冠军。</div>

ログイン後にコピー

nowrapとnormalの違いは、自動的に折り返されないことです。 text-overflow 属性を使用する場合、それを機能させるには、white-space: nowrap; および overflow: hidden; と連携する必要があります。スペースバーの代わりに) ですが、改行は保持され、自動的に折り返されます

pre-wrap と pre-line の違いは、余分な空白を保持することです

概要

 タグ内にソースコードを表示する場合、url 属性が非常に長くなり、ページが壊れます (特にモバイルデバイスの場合)。white-space: pre-wrap; plus word-wrap: Break-word;

A を使用できます。タグの外側で改行を強制する一般的な方法は、overflow:hidden;Add word-wrap:break-word;
 
改行を強制しない場合は、white-space:nowrap;Add word-break: keep-all;