长字溢出flex容器

Question

有人知道如何避免flex容器中的长单词溢出吗？

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

我只找到了该线程Break long words inside flex item，但不能解决问题

谢谢

Answer 1

又好又容易-断字：全力以赴；

只需添加即可。没事没事了：）

word-break: break-all;

在此处查看结果：

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
  word-break: break-all;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

Answer 2

您尝试这样做吗？

 .wrap{
      display: flex;
      max-width: 150px;
    }

    .b{
      word-break: break-all;
    }