The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Wrap Text In pre Tags With white-space In CSS

TL;DR

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

TODO: Pull subtitle into page object
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

html_start_default_section html_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Wrap Text In pre Tags With white-space In CSS

-- tldr/

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

-- code
-- title: Example Thing Whatever


white-space: pre-wrap


-- /tldr

-- h2

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:


-- section/
-- class: pre_example flow

-- h3

white-space: normal

-- html/

<pre class="set_normal">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html


-- h3

white-space: nowrap

-- html/

<pre class="set_nowrap">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html

-- h3

white-space: pre 

-- html/

<pre class="set_pre">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html

-- h3

white-space: pre-wrap

-- html/

<pre class="set_prewrap">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html

-- h3

white-space: pre-line

-- html/

<pre class="set_preline">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html

-- h3

white-space: break-spaces 

-- html/

<pre class="set_breakspaces">Start    it          Guess_the_results_from_the_first_scores. Hang tinsel from both branches</pre>

-- /html


-- /section


-- css
-- show
-- title: CSS For this page

.pre_example pre {
  padding: 0.8rem;
  width: 24ch;
  border: 1px solid white;
  background-color: var(--main-clr-secondary-base);
}

.set_normal {
  white-space: normal;
}

.set_nowrap {
  white-space: nowrap;
}

.set_pre{
  white-space: pre;
}

.set_prewrap{
  white-space: pre-wrap;
}

.set_preline{
  white-space: pre-line;
}

.set_breakspaces {
  white-space: break-spaces;
}


-- categories
-- CSS
-- WebDev

-- metadata
-- date: 2017-07-30 17:56:44
-- id: 01bpar0q
-- status: draft 
-- type: post
-- site: aws