word-breakを模倣する方法：break-word; IE9、IE11、Firefoxの場合

Question

IE9、IE11、Firefoxの場合はword-break: break-word;と似ていますか？

Chromeで動作するようです。私はそれが非標準のWebkitのみであることを学び、理解しました。

ちなみに、私が使用して試してみました、

white-space: pre-wrap; 

そして、いくつかのより多くの

、などの

overflow-wrap: break-word; 

はまた、下記のCSSを試してみました

word-wrap: break-word; 
word-break: break-word; 

しかし、これらはいないようです働く

Iテキストが動的であり、ユーザの地理的位置に応じて異なるであろうように明示的にdisplay: block;行うことで（テキストを含む）スパンに固定された幅を提供することができません。現在、約18言語をサポートしています。

これは、コードがどのように見えるか

されるHTML、

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div> 

CSS、

#theSpan{ 
    white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera 7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 
    word-break: break-all; 
} 

#grid2{ 
    width: 100px; 
} 

それは

、このようになります
私は翻訳されたテキストが長すぎると、それは、グリッドの外に溢れた言語のいくつかのためとして word-break: break-all;を使用していた：私は注意してください、それは

、のようになりたい

。テキスト 'Product Support'は動的です。

更新：
私はdivのIDがgrid2の固定幅です。翻訳されたテキストが長すぎる言語の1つでは、それは単一の単語であり、grid2 divから流れ出します。

コードも更新されました。

Answer 1

あなたが探しているものを達成するためにdisplay:table-captionを使用してください。

LIVE DEMO

HTML：

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div> 

CSS：

#theSpan{ 
    display:table-caption; 
} 

は、この情報がお役に立てば幸いです。

Answer 2

私は使用してクロム、FirefoxとIEでの良好な成功を収めている：私はすでに使用していた私の問題の場合は

word-break: break-word; 
word-wrap: break-word; 

を：

display: table-cell; 

と私が含まれるようになってしまった

max-width: 440px; 

すべてのブラウザでラッピングできます。ほとんどの場合、最大幅は必要ありませんでした。