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