我有2个flexbox和其中一个flexbox。如果文本大于父项,我希望文本分成多行。由于某种原因,如果我发送一个固定值(例如250px)作为宽度,它会起作用。如果将宽度设置为100%,它将不会分成多行。
这是我的代码:
#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;
}Run Code Online (Sandbox Code Playgroud)
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
这就是我想要的,但长句子中没有空格。
#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;
} …Run Code Online (Sandbox Code Playgroud)