如何模拟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;
但是这些似乎不起作用。
我无法通过显式设置的
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;
。“产品支持”文本是动态的。
更新:
我有一个带有id为grid2的固定宽度的div。在一种语言中,翻译后的文本太长了,它是一个单词,会溢出grid2 div。
代码已更新。