Html Flexbox div 文本换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34283692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox div text wrapping
提问by StragaSevera
I want to make text in my flexbox layout wrap.
我想在我的 flexbox 布局包装中制作文本。
Code:https://jsfiddle.net/u2oswnth/2/
代码：https : //jsfiddle.net/u2oswnth/2/
.child {
border: solid 1px;
display: flex;
}
.left {
width: 100px;
}
.container {
display: flex;
flex-wrap: wrap;
}<div class="container">
<div class="child left">
Left!
</div>
<div class="child right">
I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
</div>
</div>What I have:When exceeding frame width, .rightdivfalls to next row.
我所拥有的：当超过框架宽度时，.rightdiv落到下一行。
What I want:When exceeding frame width, words in .rightdivstart wrapping, two columns stay side-by-side, forming single row.
我想要的是：当超过框架宽度时，单词.rightdiv开始换行，两列并排，形成单行。
回答by Hidden Hobbes
Change flex-wrap: wrap;to flex-wrap: nowrap;. By using flex-wrap: wrap;you are telling the .rightdivto wrap onto a new line if it runs out of space. As you only want the text itself to wrap you need to use flex-wrap: nowrap;to keep .righton the same line. The text will automatically wrap when there is not enough space.
更改flex-wrap: wrap;为flex-wrap: nowrap;。通过使用，flex-wrap: wrap;您告诉.rightdiv换行如果空间不足。由于您只希望文本本身换行，因此您需要使用flex-wrap: nowrap;以保持.right在同一行。当空间不足时，文本将自动换行。
- Change
flex-wrap: wrap;toflex-wrap: nowrap;on.container
- 更改
flex-wrap: wrap;为flex-wrap: nowrap;开.container
.child {
border: solid 1px;
display: flex;
}
.left {
width: 100px;
}
.container {
display: flex;
flex-wrap: nowrap;
}<div class="container">
<div class="child left">
Left!
</div>
<div class="child right">
I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
</div>
</div>回答by solanki...
NOTE: There is no need to apply "display: flex"on child class and flex-wrap: nowrap;on container class because bydefault it is nowrap. Below is updated answer and WORKS!!.
注意：不需要"display: flex"在子类和flex-wrap: nowrap;容器类上申请，因为默认情况下它是nowrap. 以下是更新的答案和作品！！
.child {
border: solid 1px;
}
.left {
width: 100px;
}
.container {
display: flex;
}
<div class="container">
<div class="child left">
Left!
</div>
<div class="child right">
I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
</div>
</div>
回答by stobasan
You should change flex-wrap: wrap;to flex-wrap: nowrap;
你应该flex-wrap: wrap;改为flex-wrap: nowrap;
Please note that flex-wrap: no-wrap;(no-wrap with a dash) is NOT a valid value. Here's the doc reference about it: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
请注意flex-wrap: no-wrap;（不带破折号的包裹）不是有效值。这是关于它的文档参考：https: //developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
