Browser Compatible Word Wrap and Whitespace: Pre

combining word-wrap: break-word; and white-space: pre;

According to the MDN doc page, this is the desired behavior for the white-space property:

pre

Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap

Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

So, to obtain what you described, you need to use the value pre-wrap in place of pre.

How do I wrap text in a pre tag?

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    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+ */
}

HTML pre word wrapping in PHP doesn't work

It is because of <br> tag at the end, I have faced the same problem some time ago. <br> get applied first for every time and then table gets wrapped.

Remove <br> at the end

echo '<tr><td>some text</td><td><pre>Some Very Long Text From Mysql </pre></td></tr>';

and then it will work perfectly fine.

---

Related Topics