FF3.0.7 Text wrap

Question

Clutching at straws here but anyone got a solution for wrapping text in Firefox 3.0.7?

Text should wrap within container like other browsers.

Example: http://jsfiddle.net/4t7Ut/ (obviously viewed in 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

To make the content wrap so that it is divided into lines with each line containing as many characters as possible (except for the last line of course), you would need to add the <wbr> tag after each character in the text content, in order to make things work that way even on an ancient browser like Firefox 3. You could use client-side scripting for the purpose:

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

It almost never adequate to allow such breaking. Both human and computer languages have their own line breaking rules. So the <wbr> tag should be inserted at suitable positions only, either manually or using an algorithm suitable for the content.

Instead of <wbr>, you could also use its character-level counterpart ZERO WIDTH SPACE (​). It is not supported by very old browsers, though Firefox 3 seems to be OK with it.

Answer 2

try it:

use width:100%; display:inline-block; to .text-to-wrap