FF3.0.7文本换行

Question

在这里抓住救命稻草，但谁有一个解决方案在Firefox 3.0.7中包装文本？

文本应该像其他浏览器一样在容器中换行。

示例：http://jsfiddle.net/4t7Ut/ (在FF3.0.7中明显可见)

#container {
    border: 1px dashed;
    width: 100px;
}

.text-to-wrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

..。

<div id="container">
<div class="text-to-wrap ">VWvU3dpVq5wJio6oFE82pmQuBTRzbii4dLd4NGBr332V2P4Skx8GwLozZrczNoRPmqWSrxnLEKh5PBZ6s3AjMFX3ftLHyuR7RGSA</div>
</div>

Answer 1

要使内容换行，使其分成行，每行包含尽可能多的字符(当然，最后一行除外)，您需要在文本内容中的每个字符后添加<wbr>标记，以便即使在像Firefox3这样的老式浏览器上也是如此。为此，您可以使用客户端脚本：

<script>
var cont = document.getElementById('container').getElementsByTagName('div')[0];
cont.innerHTML = cont.innerHTML.replace(/(.)/g, '$1<wbr>');
alert(cont.innerHTML);
</script>

允许这样的破坏几乎从来都不够。人类语言和计算机语言都有自己的换行规则。因此，应该只在适当的位置插入<wbr>标记，可以手动插入，也可以使用适合内容的算法插入。

您也可以使用它的字符级对应的零宽度空格(​)来代替<wbr>。非常老的浏览器不支持它，尽管Firefox3似乎可以接受它。

Answer 2

试试看：

使用width:100%; display:inline-block;连接到.text-to-wrap