css - 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>在文本内容中的每个字符后标记，以便即使在像 Firefox 3 这样的古老浏览器上也能以这种方式工作。您可以使用客户端脚本来达到目的:

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

允许这样的破坏几乎是不够的。人类和计算机语言都有自己的换行规则。所以 <wbr>标签应该只插入到合适的位置，手动或使用适合内容的算法。

而不是 <wbr> ，您还可以使用其字符级对应的零宽度空间 ( ​ )。非常旧的浏览器不支持它，尽管 Firefox 3 似乎可以接受。