テーブルセルの折り返しがスラッシュで機能しない

Question

固定レイアウトでテキストを折り返していますが、テキストにスラッシュが含まれていると機能しません。

Javascript（純粋なCSS）からスペースを挿入せずに修正できますか？

jsfiddle：

http://jsfiddle.net/HgBhk/1/

Not working: 
<div style="display:table; width:170px; background-color:cyan;"> 
    <div style="display:table-row"> 
     <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div> 
     <div style="display:table-cell; width:34px; background-color:red;">xxxxx</div>   
    </div> 
</div> 

</br> 
Working: 
<div style="display:table; width:170px; background-color:cyan;"> 
    <div style="display:table-row"> 
     <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div> 
     <div style="display:table-cell; width:34px; background-color:red;">xxxxx</div>   
    </div> 
</div> 

Answer 1

"テーブル" のdiv要素にtable-layout:fixed;を追加し、行を分割するために、セルに幅を割り当てる：

JSFiddle

Answer 2

各oの後に<wbr>タグまたはゼロ幅のスペース​を挿入しますスラッシュまたは他の文字の後に直接改行を入れることができるようにする必要があります。これらの選択肢の選択はビットcomplicatedですが、あなたのコードはすでに古いバージョンのIEで動作しないので、ここでも無視してください。​が正しい選択になります。つまり、たとえば次のように記述します。

abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb 

問題は文字レベルであり、スタイリングの問題ではありません。

空白文字を含まない文字列は、通常、折り返しでは分割できません。そのため、ブラウザを許容可能な改行ポイントで区切ったり、ハイフネーションを正しく行い、単語分割を確実に行うことができない限り、例外的なケースでは、word-wrap: break-wordのような設定は、ラッピングを制御する良い方法がなく、オーバーフローを回避する必要がある場合に緊急ブレークを意味します。