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>

How should it wrap, and is “VWvU3dpVq5wJio6oFE82pmQuBTRzbii4dLd4NGBr332V2P4Skx8GwLozZrczNoRPmqWSrxnLEKh5PBZ6s3AjMFX3ftLHyuR7RGSA” your real data? — Jukka K. Korpela, Oct 30 '12 at 10:54
The data could be that many chars and it should wrap within the confines of the container. — Alex Gill, Oct 30 '12 at 10:55

score 1 · Accepted Answer · answered Oct 30 '12 at 12:57

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.

This appears to be the only way to resolve this, thanks for your efforts Jukka. — Alex Gill, Oct 30 '12 at 13:48

score 0 · Answer 2 · answered Oct 30 '12 at 10:51

0

try it:

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

answered Oct 30 '12 at 10:51

Michael Antonius

942
2
11
20

FF3.0.7 Text wrap

2 Answers2