小编tom*_*nho的帖子

flexbox中的自动换行不遵守100%宽度限制

我有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)

html css css3 word-wrap flexbox

1
推荐指数
1
解决办法
1327
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1

word-wrap ×1