web-dev-qa-db-ja.com

Word-breakを模倣する方法：break-Word; IE9、IE11およびFirefox用

IE9、IE11、FirefoxのWord-break: break-Word;を模倣する方法

Chromeで動作するようです。これは非標準のWebキットのみであることを学び、理解しました。

参考までに、使用してみましたが、

white-space: pre-wrap;

そしてもっと

   overflow-wrap: break-Word;

また、下記のCSSを試しました。

 Word-wrap:  break-Word;
 Word-break: break-Word;

しかし、これらは機能していないようです。

テキストが動的であり、ユーザーの地理的位置によって異なるため、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;
}

こんな感じ

enter image description here

のようにしたい

enter image description here

注意してください：
一部の言語については、翻訳されたテキストが長すぎてグリッドからオーバーフローするため、Word-break: break-all;を使用する必要がありました。 「製品サポート」というテキストは動的です。

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

コードも更新しました。

htmlcssgoogle-chromeinternet-explorerfirefox
14
Sudhansu Choudhary

Chrome、Firefox、およびIEのみを使用して成功しました：

Word-break: break-Word;
Word-wrap: break-Word;

私の問題の場合、私はすでに使用していました：

display: table-cell;

含めなければならなかった

max-width: 440px;

すべてのブラウザでラッピングを取得します。ほとんどの場合、max-widthは必要ありません。

15
Darren Reimer

使用する display:table-caption探しているものを実現します。

ライブデモ

HTML：

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

CSS：

#theSpan{
  display:table-caption;
}

お役に立てれば。

0
Nitesh