Question

I would like the long code to wrap around inside the td and div. It does so in Chrome, but I can’t get it to work in Firefox. In Firefox, the text just keeps going into the next td element. Could someone help me out? Other comments on my code are welcome too (e.g. “don’t use so many divs” or something)

<tr class="line">
        <td class="lineNumber">38</td>
        <td class="code"><div class="divCode"><code>    error = guess - n/guessjfdklsjf dklsjf kdlsjfkldsjfkl dsjfklds jfkldsjfkljdsa;lfkjdsakl;fjdskla;fjdksl;ajfkld;sajfkl;dsajfkl;dsa
                    <td class="otherClass">other stuff here</td>

</code></div></td>
</tr>

This is styled by the following CSS:

.line td{  
padding-right: 10px;  
    padding-left: 10px;  
    font-family: monospace;  
    word-wrap: break-word;  
    max-width: 40ex;
}  

.code {
    white-space: pre;
    max-width: 40ex;
}

.divCode {
    max-width: 40ex;
}

code {
    max-width: 40ex;
    word-wrap:break-word;
}

Thanks,
–h

Answer 1

The declaration white-space: pre prevents wrapping, so removing it fixes this problem. But if you wish to preserve spaces in the content, use white-space: pre-wrap instead (Caveat: no support in IE 7).

Note that wrapping does not preserve indentation: if a line starts with spaces and gets wrapped, the next line starts in the first position, with no indentation. To get wrapping that preserves indentation (and possibly indents continuation lines more than the initial line), you need different markup: make each logical line an element etc.