How to make <pre> text wrap using CSS

Learn how to make <pre> text wrap using CSS in this quick and easy tutorial.

When you place some text within HTML <pre> tags, you’ll find that by default, the text does not automatically wrap if it gets too long.

This might mess up your page layout by stretching the text beyond an expected visual range.

You can make <pre> text wrap by using the following in your CSS stylesheet:

pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

That’s all there is to it! You should now see your <pre> text wrap on your web page.