允许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>