How to auto wrap texts within the HTML pre tag using CSS code?

For those of you who use WordPress a lot, the <pre> tag will help you retain the existing format of a particular text or code without making any changes. One problem with using the <pre> tag directly is that it doesn’t wrap text automatically, and sometimes it makes content hard to read because visitors need to scroll back and forth.

So how do you get text inside the <pre> tag to wrap itself? You can use CSS to achieve the content contained in <pre> automatic line wrapping, the specific code is as follows:

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5+ */
}