![中的自动换行不遵守]( "中的自动换行不遵守")
本文介绍了flexbox 中的自动换行不遵守 100% 宽度限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 2 个 flexbox 和一个里面的 flexbox.如果文本大于其父级，我希望文本分成多行.出于某种原因，如果我发送一个固定值(例如 250px)作为宽度，它会起作用.如果我将宽度设置为 100%，它不会分成多行.
这是我的代码:
#flexparent {显示:弹性}#flexchild1 {弹性:1；背景颜色:绿色；}#flexchild2 {弹性:1；背景颜色:红色；显示:弹性；弹性流:列}#flexchild3 {背景颜色:紫色；宽度:100%；自动换行:断字；}
<div id="flexchild1">弹性儿童1
<div id="flexchild2">弹性儿童2<div id="flexchild3">ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
这就是我想要的，但长句中没有空格.
#flexparent {显示:弹性}#flexchild1 {弹性:1；背景颜色:绿色；}#flexchild2 {弹性:1；背景颜色:红色；显示:弹性；弹性流:列}#flexchild3 {背景颜色:紫色；自动换行:断字；}
<div id="flexchild1">弹性儿童1
<div id="flexchild2">弹性儿童2<div id="flexchild3">Thisisasuperlongsentence Loremipsum dolorsitametcon secteturadipisicingelitAsperi resnecessitatibusneu eodioImpeditistenes ciuntescorru ptiessecumrepudia ndaequidolor umIllumtempori busquoerrorcumqu eeximpeditmagnam绝杀mipsumdo lorsitam etconsecteturadipisicing elitAsperioresne cessitatibusneueodi oImpeditisten esciuntescorruptiessecumrepudia ndaequidolorumIll umtemporibusq uoerrorc umqueeximpe ditmagn amtstLoremipsu mdolorsitametcon secteturadipisici ngelitAsperio resnecessitati BUSN
这是我为此制作的代码笔.
解决方案
这是一个 min-width 问题，弹性项目不能小于其内容.
min-width 的默认值是 auto，在这种情况下它发生在弹性项目 #flexchild2
给它 min-width: 0 就可以了.
此外，不需要 width: 100%，因为 flex列"项的 align-items 默认为 stretch，并且因此会自动占据其父级的全宽，并且可以被移除.
堆栈片段
#flexparent {显示:弹性}#flexchild1 {弹性:1；背景颜色:绿色；}#flexchild2 {弹性:1；背景颜色:红色；显示:弹性；弹性流:列；最小宽度:0；/* 添加 */}#flexchild3 {背景颜色:紫色；/*宽度:100%；删除 */自动换行:断字；}
<div id="flexchild1">弹性儿童1
<div id="flexchild2">弹性儿童2<div id="flexchild3">ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
I have 2 flexboxes and a flexbox inside one.I want the text to break into multiple lines if it is bigger than it's parent. For some reason it works if I sent a fixed value (e.g. 250px) as width. If I set the width to 100%, it will not break into multiple lines.
This is the code I have:
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column
}
#flexchild3 {
background-color: purple;
width: 100%;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
This is how I want it but without the spaces in the long sentence.
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column
}
#flexchild3 {
background-color: purple;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
Thisisasuperlongsentence Loremipsum dolorsitametcon secteturadipisicingelitAsperi resnecessitatibusneu eodioImpeditistenes ciuntescorru ptiessecumrepudia ndaequidolor umIllumtempori busquoerrorcumqu eeximpeditmagnam Lore mipsumdo lorsitam etconsecteturadipisicing elitAsperioresne cessitatibusneueodi oImpeditisten esciuntescorruptiessecumrepudia ndaequidolorumIll umtemporibusq uoerrorc umqueeximpe ditmagn amtstLoremipsu mdolorsitametcon secteturadipisici ngelitAsperio resnecessitati busn
</div>
</div>
</div>
Here are the codepens I made for this.
解决方案
This is a min-width issue, where a flex item can't be smaller than its content.
The default value of min-width is auto, and in this case it happens to the flex item #flexchild2
Give it min-width: 0 and it will work.
Also, the width: 100% is not needed, since a flex "column" item's align-items default to stretch, and as such automatically take full width of its parent, and can be removed.
Stack snippet
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column;
min-width: 0; /* added */
}
#flexchild3 {
background-color: purple;
/*width: 100%; removed */
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
这篇关于flexbox 中的自动换行不遵守 100% 宽度限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-01 10:43