允许flexbox中居中的项目包装[重复]

Question

我正在使用 flexbox 和 margin:auto 在页面内将元素水平和垂直居中。是否可以使该元素的内容在两个轴上居中，但允许文本在扩展时换行？

在下面的演示中，我不断添加文本以显示当元素使用 flexbox 以这种方式居中时，它如何很快超过浏览器窗口的宽度。我想包装文本并将所有内容都保留在屏幕上。有什么建议吗？

// \ \ \ \ \ \ \ \ \ 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 似乎没有起作用。 （在我的代码中）。

Answer 1

使用word-break: break-all，因为这只是一组非常长的内联字符，字符之间没有实际的空格。

// \ \ \ \ \ \ \ \ \ 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>