Question

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

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

＆＃13;

// \ \ \ \ \ \ \ \ \ 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' );

＆＃13;

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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;
}

＆＃13;

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

＆＃13;

ps：flex-wrap: wrap似乎没有做到这一点。（它在我的代码中）。

Answer 1

使用// \ \ \ \ \ \ \ \ \ 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");，因为这只是一组非常长的内联字符，字符之间没有实际空格。

＆＃13;

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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;
}

＆＃13;

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

＆＃13;

if name in favorite_language

＆＃13;

允许flexbox中的中心项目换行

1 个答案: