Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>[CSS] word-break and overflow-wrap</h1>
<hr>
<ul>
    <li><span class="underline">英文</span>以單詞為單位;<span class="underline">CJK 語言(日文、中文、韓文)</span>則沒有單詞的區分,一個字為一個單位。</li>
    <li><span class="keyword">###</span>表示前面有換行(<span class="code">\r\n</span>)。</li>
</ul>
<p style="text-align: right;">整理:<a href="https://codepen.io/andyyou/" target="_blank">Andyyou</a> </p>

<h3 class="title-border">word-break</h3>

<p>1. <code class="language-css">word-break: normal</code></p>
<p>英文以單詞為單位,如果最後一個單位不夠放,則移至下一行,單位不會斷行(意思是如果有一個英文單字從頭到尾的空間還不夠就會破版);CJK 語言則以字元為一個單位,直接將行排滿,遇到邊界就換行。</p>
<p class="word-break-normal narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字
</p>

<p>2. <code class="language-css">word-break: break-all</code></p>
<p>不分英文或 CJK 語言,<span class="underline">以字元為單位</span>,且不會依據空白或返回鍵處理文章段落。直接將行排滿,遇到邊界就換行。英文和 CJK 皆相同效果。</p>
<p class="word-break-breakAll narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字</p>

<p>3. <code class="language-css">word-break: keep-all</code></p>
<p>不分英文或 CJK 語言,<span class="underline">只要連在一起就算一個單詞單位</span>,單位不會在斷行。依據空白或回車鍵切割來判斷是否換行</p>
<p class="word-break-keepAll narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字</p>

<p>4. <code class="language-css">word-break: break-word</code></p> 
<p>主要依據空白或返回鍵切割段落文章,<span class="underline">英文</span>以單詞為單位,<span class="underline">CJK 語言</span>則沒有單詞的區分,一個字為一個單位。</p>
<p class="word-break-breakWord narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字</p>
<div class="quotation">
    <ul>
    <li>在 Chrome 底下單詞太長時會自動換行。</li>
    <li>但在 Firefox 底下套用 <span class="code">word-break: break-word</span> 無效,因此英文單詞太長時不會自動換行。Firefox 下需添加 <span class="code"> overflow-wrap: break-word;</span>。
    </li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break" target="_blank">Browser Compability of word-break</a> @ MDN</li>
        </ul>
</div>

<h3 class="title-border">overflow-wrap</h3>

<p>5. <code class="language-css">overflow-wrap: normal</code></p>
<p>效果與 <span class="code">word-break: normal;</span> 相同。</p>
<p class="overflow-wrap-normal narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字</p>

<p>6. <code class="language-css">overflow-wrap: break-word</code></p>
<p>效果與 <span class="code">word-break: break-word;</span> 相同。</p>
<p class="overflow-wrap-break-word narrow">##This is a long sentence with long words and break in the end thisIsLongWordThisIsLongWordThisIsLongWord
###ThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWordThisIsAReallyLongWord 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
###這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長很長的中文句子這是很長的中文句字</p>


<!-- <h3 class="title-border">white-space</h3> -->


<h2>參考</h2>
<ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break" target="_blank">word-break</a> @ MDN</li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target="_blank">overflow-wrap</a> @ MDN</li>
</ul>
              
            
!

CSS

              
                .narrow {
  padding: 5px;
  border: 1px solid;
  overflow: visible;
  max-width: 100%;
}

.word-break-normal {
  word-break: normal;
}

.word-break-breakAll {
  word-break: break-all;
}

.word-break-keepAll {
  word-break: keep-all;
}

.word-break-breakWord { 
  word-break: break-word; 
} 

.overflow-wrap-normal {
  overflow-wrap: normal;
}

.overflow-wrap-break-word {
  overflow-wrap: break-word;
}
              
            
!

JS

              
                
              
            
!
999px

Console