Displaying whitespace in HTML when pulling from MySQL TEXT column

Question

I have saved input from a textarea element to a TEXT column in MySQL. I'm using PHP to pull that data out of the database and want to display it in a p element while still showing the whitespace that the user entered (e.g. multiple spaces and newlines). I've tried a pre tag but it doesn't obey the width set in the containing div element. Other than creating a PHP function to convert spaces to &nbsp and new lines to br tags, what are my options? I'd prefer a clean HTML/CSS solution, but any input is welcome! Thanks!

Answer 1

You can cause the text inside the pre to wrap by using the following CSS

pre {
 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+ */
}

Taken from this site

It's currently defined in CSS3 (which is not yet a finished standard) but most browsers seem to support it as per the comments.

Answer 2

You've got two competing requirements. You either want the content to fit within a certain area (ie: width: 300px), or you want to preserve the whitespace and newlines as the user entered them. You can't do both since one - by definition - interferes with the other.

Since HTML isn't whitespace aware, your only options are changing multiple spaces to "&nbsp;" and changing newlines to <br />, using a <pre> tag, or specifying the css style "white-space: pre".

Answer 3

Regarding the problem with the div, you can always make it scroll, or adjust the font down (this is even possible dynamically based on length of longest line in your server-side code).

Answer 4

You could just use PHP's nl2br function.