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

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

转载作者：行者123 更新时间：2023-12-05 08:54:58

25

4

<分区>

我有 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;
}

<div id="flexparent">
      <div id="flexchild1">
        FLEXCHILD1
      </div>
      <div id="flexchild2">
        FLEXCHILD2
        <div id="flexchild3">
 ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
        </div>
      </div>
    </div>

这就是我想要的，但长句中没有空格。

#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>

这是我为此制作的代码笔。

我的密码:https://codepen.io/tomzz/pen/mpJMow
我多么想要它，但没有 250 像素的宽度:https://codepen.io/tomzz/pen/VyLMaW
我多么想要它，但句子中没有空格:https://codepen.io/tomzz/pen/vpOeJp

25

4

0

文章推荐： php - 自动格式化/对齐数组 PhpStorm

文章推荐： c++11 - 迭代 std::array 中的记录

vaadin - 在 Vaadin 7.0 中，如何刷新支持表的 JavaBean 数据？更换容器？换 bean ？
在 Vaadin 7.0，显示时JavaBean Table 中的数据与 BeanContainer ，用新数据刷新表的正确方法是什么？最佳答案该表通过监听器监视表项的属性。如果您通过表的 Ite
web-services - 换 SOAP :address location in generated wsdl to https on tomcat 6 axis2(1. 6.2)
首先，我使用的是带有 Axis2 1.6.2 的 eclipse，我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。我被要求使对我
ruby-on-rails-3 - 将 Rails 从 3.1.1 升级到 3.1.3 后，参数数量错误(3 换 1)
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3，现在，对于每个请求，它仅响应错误数量的参数(3 for 1)。不幸的是，它没有说明错误在哪里，并且应用程序跟踪为空。我认为存在一

首页

博学

6Ren·AI

商城

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