允许 flexbox 中的居中项目换行

Question

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

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

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

允许 flexbox 中的居中项目换行

Allow centered items in flexbox to wrap

html

css

text

word-wrap

flexbox