[英]How to mimic word-break: break-word; for IE9, IE11 and Firefox
How to mimic word-break: break-word;
如何模仿word-break: break-word;
for IE9, IE11 and Firefox?适用于 IE9、IE11 和 Firefox?
It seems to work in Chrome.它似乎适用于 Chrome。 I have learnt and understood that it is a is non-standard, webkit only.我了解到并理解它是一个非标准的,仅 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;
我无法通过display: block;
explicitly as the text is dynamic and will differ according to the user's Geo-location.明确地,因为文本是动态的,并且会根据用户的地理位置而有所不同。 Currently we support around 18 languages.目前我们支持大约 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;
我不得不使用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. “产品支持”文本是动态的。
Update:更新:
I have a fixed width for the div with id, grid2.我有一个固定宽度的 div,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.在其中一种语言中,翻译的文本太长,它是一个单词,并且从 grid2 div 中流出。
Updated the code too.也更新了代码。
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 不是必需的。
#grid2{
white-space: pre-wrap;
word-wrap: break-word;
}
This should work for IE11, but not for IE9这应该适用于 IE11,但不适用于 IE9
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.