text wrapping in the html pre tag

If you ever have a <pre> tag in a div or table, and you are providing say text from your database to the pre element, be very careful that the default style of the pre tag will let the text keep running until hitting the newline character. This is probably not desirable because these long text lines will push their container thus expanding the container unexpectedly.

It’s ugly to say the least.

To enable the expected text wrapping, do:

pre {
  white-space: pre-wrap;
}

This will make the long lines wrap around when hitting the container’s edge, thus respecting your specified container’s width.

I only tested this in Chrome and Safari btw.

Ref link: http://stackoverflow.com/questions/1634203/pre-tag-in-html-with-fixed-width

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s