【CSS】英語の改行を制御するdivレイヤー境界の問題_html/css_WEB-ITnose

英語版のウェブページを書いたことがないのかわかりません、

書いたことがあるかどうかわからないかもしれません、

ウェブページでは、divに英語を入れると、

divが採用されます長い単語の優先原則、

長い英語の単語を許可します単語が div の幅を超えています、

たとえば、次のコード:

<div style="width:100px; background:#dddddd">I am a looooooooooooooooooooooooooooooooooooooooong word!</div>

もともと、このレイヤーの幅を 100px に設定していればいいのですが。境界線に遭遇すると、その中のすべてが自動的に折り返され、次のような効果が得られます:

しかし、次のような効果が得られます:

これは、デフォルトでは div が長い単語を中断しないためです。

この境界を厳密にするには、この画像をレイヤーのスタイルに word-break:break-all または word-wrap:break-word; 属性を追加する必要があります。 IE5.5 はこれら 2 つの属性をサポートしていますが、Adobe Dreamweaver CS5 にこのコード プロンプトがない理由はわかりません。

word-break:break-all、文字単位で分割し、各文字を分割できます。たとえば、「I am a looooooog loooooooooooooooooooooooooooooooooooooooooooong word!」:

break-all は次のとおりです:

Theコードは次のとおりです:

<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>

word-wrap:break-word; もあります。これは word-break:break-all と比較され、単語を分割単位として使用します。つまり、単語をこのように使用します。 Break の方がエディターのような西洋人の習慣に沿っていますが、私にとっては、処理できない長い単語の場合は、単位中断:

を使用する必要があります。

コードは次のとおりです:

<div style="width:100px; background:#eeeeee; word-wrap:break-word;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>

以下は 3 つの効果の比較とコードです。 誰もが幅を明確に確認できるように、レイヤーは意図的に灰色の背景でペイントされています。 1 つは属性が追加されていません。1 つはスタイルに word-break:break-all を追加する方法で、もう 1 つは word-wrap:break-word;:

I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!
<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>
I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!

を追加する方法です。