Allow centered items in flexbox to wrap

Question

I'm using flexbox and margin:auto to center an element both horizontally and vertically within a page. Is it possible to keep the content of this element centered in both axis but allow the text to wrap as it expands?

In the demo below I keep adding text to show how the element soon exceeds the width of the browser window when it's centered this way using flexbox. I want to wrap the text and keep everything on screen. Suggestions?

// \ \ \ \ \ \ \ \ \ TYPE WRITER EFFECT / / / / / / / / / / / / / / / / / / ///

function type( i, t, ie, oe ){
    input = document.getElementById( ie ).textContent;
    document.getElementById( oe ).textContent += input.charAt( i );
    setTimeout( 
      function(){
        (
          ( i < input.length - 1 ) ? type( i+1, t, ie, oe) : false
        );
      }, 
      t 
   );
}

type( 0, 100, 'input', 'output' );

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-wrap: wrap; /* also...this isn't working */
  margin: 0;
  font-family: sans-serif;
}

p {
  margin: auto;
  text-align: center;
}

p:nth-child( 2 ) {
  display: none;
}

<p id="output"></p>

<!-- \\ \ VERY LONG STRING OF TEXT TO EXTEND PAST SCREEN /////////// // -->

<p id="input">
So&nbsp;I&nbsp;have&nbsp;a&nbsp;long&nbsp;string&nbsp;of&nbsp;text&nbsp;with&nbsp;no&nbsp;spaces.&nbsp;Here&nbsp;I'm&nbsp;using&nbsp;non&#8209;breaking&nbsp;space&nbsp;character&nbsp;entities&nbsp;to&nbsp;simulate&nbsp;that.&nbsp;The&nbsp;problem&nbsp;is&nbsp;I'm&nbsp;using&nbsp;flexbox&nbsp;to&nbsp;center&nbsp;the&nbsp;effected&nbsp;element&nbsp;here,&nbsp;but&nbsp;I&nbsp;don't&nbsp;want&nbsp;all&nbsp;the&nbsp;text&nbsp;to&nbsp;stay&nbsp;on&nbsp;one&nbsp;line&nbsp;like&nbsp;this.&nbsp;There's&nbsp;no&nbsp;spaces,&nbsp;I'm&nbsp;using&nbsp;flexbox,&nbsp;and&nbsp;I&nbsp;want&nbsp;it&nbsp;to&nbsp;wrap.&nbsp;Help?
</p>

ps: flex-wrap: wrap doesn't seem to be doing the trick. ( it's in my code ).

Answer 1

Use word-break: break-all since this is just a really long set of inline characters with no actual spaces between the characters.

// \ \ \ \ \ \ \ \ \ TYPE WRITER EFFECT / / / / / / / / / / / / / / / / / / ///
function type( i, t, ie, oe ){
    input = document.getElementById( ie ).textContent;
    document.getElementById( oe ).textContent += input.charAt( i );
    setTimeout( 
      function(){
        (
          ( i < input.length - 1 ) ? type( i+1, t, ie, oe) : false
        );
      }, 
      t 
   );
}

type(0, 100, "input", "output");

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-wrap: wrap; /* also...this isn't working */
  margin: 0;
  font-family: sans-serif;
}

p {
  margin: auto;
  text-align: center;
  word-break: break-all;
}

p:nth-child( 2 ) {
  display: none;
}

<p id="output"></p>

<!-- \\ \ VERY LONG STRING OF TEXT TO EXTEND PAST SCREEN /////////// // -->
<p id="input">
So&nbsp;I&nbsp;have&nbsp;a&nbsp;long&nbsp;string&nbsp;of&nbsp;text&nbsp;with&nbsp;no&nbsp;spaces.&nbsp;Here&nbsp;I'm&nbsp;using&nbsp;non&#8209;breaking&nbsp;space&nbsp;character&nbsp;entities&nbsp;to&nbsp;simulate&nbsp;that.&nbsp;The&nbsp;problem&nbsp;is&nbsp;I'm&nbsp;using&nbsp;flexbox&nbsp;to&nbsp;center&nbsp;the&nbsp;effected&nbsp;element&nbsp;here,&nbsp;but&nbsp;I&nbsp;don't&nbsp;want&nbsp;all&nbsp;the&nbsp;text&nbsp;to&nbsp;stay&nbsp;on&nbsp;one&nbsp;line&nbsp;like&nbsp;this.&nbsp;There's&nbsp;no&nbsp;spaces,&nbsp;I'm&nbsp;using&nbsp;flexbox,&nbsp;and&nbsp;I&nbsp;want&nbsp;it&nbsp;to&nbsp;wrap.&nbsp;Help?
</p>