1 answer

I will try to use human-ese lingo which might not be 100% technical correct but you should get the idea.

A chunk of text in a container with white-space: normal will wrap to new line if the rendered width is wider than the container.

Setting white-space: pre takes the content within the container as pre-formatted and will only wrap upon newlines. If the container is not wide enough, it will be forced to widen or the content will be hidden or floated depending on other properties.

Setting white-space: pre-wrap takes the content within the container as pre-formatted and will wrap upon newlines AND ALSO wrap if the text width is wider than that of the container.