home ~ projects ~ socials

Wrap Text In pre Tags With white-space In CSS

TL;DR

To wrap blocks of text or code in pre tags, use:

Example Thing Whatever

white-space: pre-wrap

Examples

These examples show the different ways to use white-space to change the way pre tags wrap text. Each example uses this single line of text in a pre tag that looks like this:

white-space: normal

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches

white-space: nowrap

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches

white-space: pre

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches

white-space: pre-wrap

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches

white-space: pre-line

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches

white-space: break-spaces

Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches
-- end of line --