允许flexbox中的中心项目换行

时间:2017-06-14 00:15:43

标签: html css text flexbox textwrapping

我使用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' );
&#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;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:3)

使用// \ \ \ \ \ \ \ \ \ 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;
&#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;
&#13;
&#13;