ブレークオールを長い単語に限定する方法はありますか？

Question

ブートストラップベースのテンプレートですべてcolの非常に長い単語（いくつかの長いuuidも）を壊そうとしていますが、すべての列に以下のスタイルを使用するとすべてが破損します単語が正常に処理されたときの通常の折り返し。

できるだけ通常のブレークを使用して、break-allに戻す方法はありますか？ Javascriptのトリックは、それがパフォーマンスにあまり影響を与えない場合にも歓迎されます。

スペースが正常に動作している通常のテキストで正常に機能し、テキストにスペースやオーバーフローがない場合はbreak-allが機能します。これが可能かどうか疑問に思う！

div { 
 
    white-space: -moz-pre-wrap; 
 
    /* Mozilla */ 
 
    white-space: -hp-pre-wrap; 
 
    /* HP printers */ 
 
    white-space: -o-pre-wrap; 
 
    /* Opera 7 */ 
 
    white-space: -pre-wrap; 
 
    /* Opera 4-6 */ 
 
    white-space: pre-wrap; 
 
    /* CSS 2.1 */ 
 
    white-space: pre-line; 
 
    /* CSS 3 (and 2.1 as well, actually) */ 
 
    word-wrap: break-word; 
 
    /* IE */ 
 
    word-break: break-all; 
 
} 
 
.fifty { 
 
    width: 200px; 
 
    float: left; 
 
    border: 10px solid #e6e6e6; 
 
    margin: 1px; 
 
    font-size: 14px; 
 
    font-family: Verdana; 
 
} 
 
h6 { 
 
    clear: both; 
 
    margin:0; 
 
}

<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div> 
 
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div> 
 

 
<h6>Bad breaking at all places</h6> 
 
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div> 
 

 
<h6>Expected breaking</h6> 
 
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>

Answer 1

div { 
 

 
/These are technically the same, but use both/
 
    overflow-wrap: break-word; 
 
    word-wrap: break-word; 
 

 
    -ms-word-break: break-all; 
 
/This is the dangerous one in WebKit, as it breaks things wherever/
 
    word-break: break-all; 
 
/Instead use this non-standard one:/
 
    word-break: break-word; 
 

 
/Adds a hyphen where the word breaks, if supported (No Blink)/
 
    -ms-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    hyphens: auto; 
 

 
} 
 
.fifty { 
 
    width: 200px; 
 
    float: left; 
 
    border: 10px solid #e6e6e6; 
 
    margin: 1px; 
 
    font-size: 14px; 
 
    font-family: Verdana; 
 
} 
 
h6 { 
 
    clear: both; 
 
    margin:0; 
 
}

<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div> 
 
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div> 
 

 
<h6>Bad breaking at all places</h6> 
 
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div> 
 

 
<h6>Expected breaking</h6> 
 
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>