我使用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 I have a long string of text with no spaces. Here I'm using non‑breaking space character entities to simulate that. The problem is I'm using flexbox to center the effected element here, but I don't want all the text to stay on one line like this. There's no spaces, I'm using flexbox, and I want it to wrap. Help?
</p>
&#13;
ps:flex-wrap: wrap
似乎没有做到这一点。 (它在我的代码中)。
答案 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");
,因为这只是一组非常长的内联字符,字符之间没有实际空格。
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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 I have a long string of text with no spaces. Here I'm using non‑breaking space character entities to simulate that. The problem is I'm using flexbox to center the effected element here, but I don't want all the text to stay on one line like this. There's no spaces, I'm using flexbox, and I want it to wrap. Help?
</p>
&#13;
if name in favorite_language
&#13;