Html 如何模仿断字：断字；适用于 IE9、IE11 和 Firefox

How to mimic word-break: break-word; for IE9, IE11 and Firefox

提问by Sudhansu Choudhary

How to mimic word-break: break-word;for IE9, IE11 and Firefox?

如何模仿word-break: break-word;IE9、IE11 和 Firefox？

It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webkit only.

它似乎在 Chrome 中工作。我已经了解到并理解它是非标准的，仅限 webkit。

FYI, I have tried using,

仅供参考，我试过使用，

white-space: pre-wrap;

And some more like,

还有一些更像，

   overflow-wrap: break-word;

Also tried the below mentioned CSS,

还尝试了下面提到的 CSS，

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

But these don't seem to work.

但这些似乎不起作用。

I can't provide fixed width to the span(which contains the text) by making it display: block;explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages.

我无法通过display: block;明确地为跨度（包含文本）提供固定宽度，因为文本是动态的，并且会根据用户的地理位置而有所不同。目前我们支持大约 18 种语言。

This is how the code looks,

这是代码的样子，

The html,

html，

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

The CSS,

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;
}

It looks like this,

看起来像这样，

I want it to be like,

我希望它像，

Please note:
I had to use word-break: break-all;as for Some of the languages the translated text is too long and it overflows out of the grid. The text 'Product Support' is dynamic.

请注意：
我不得不使用word-break: break-all;as 对于某些语言，翻译文本太长并且溢出网格。文本“产品支持”是动态的。

Update:
I have a fixed width for the div with id, grid2. In one of the languages the translated text is too long, it's a Single word and it flows out of the grid2 div.

更新：
我有一个固定宽度的 div，id 为 grid2。在其中一种语言中，翻译的文本太长，它是一个单词，它从 grid2 div 中流出。

Updated the code too.

也更新了代码。

回答by Darren Reimer

I have had good success in Chrome, Firefox and IE with using only:

我在 Chrome、Firefox 和 IE 中仅使用以下内容就取得了成功：

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

In my problem case I was already using:

在我的问题案例中，我已经在使用：

display: table-cell;

and I ended up having to include

我最终不得不包括

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary.

在所有浏览器中进行包装。在大多数情况下，不需要 max-width。

回答by Nitesh

Use display:table-captionto achieve what you are looking for.

使用display:table-caption以达到你所期待的。

LIVE DEMO

现场演示

The HTML:

HTML：

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

The CSS:

CSS：

#theSpan{
  display:table-caption;
}

Hope this helps.

希望这可以帮助。