自动换行，word break无法与firefox中的display flex一起使用

Question

我有一个内容div可以是任何大小的文本。我的意图是使内容不会从中溢出。div它应根据容器的宽度自动包装。我需要word-break:break-word财产才能完成任务。Firefox会自动添加一个名为的属性overflow-wrap，但似乎无法在Firefox中使用该flex属性。如果删除flex属性，则可以看到它正常工作。是否有任何解决方法，而无需添加额外的功能DOM。请参阅下面的我的代码

.wrap{
   width:140px;
   height:auto;
   display:flex;
   border:1px solid red;
   height:35px;
   word-wrap:break-word;
   word-break:break-word;
}

<div class="wrap">
  checkwheatherithasbeenwrapped
</div>

小提琴链接。

请仅提及CSS修复

Answer 1

您可以使用 word-break: break-all

.wrap {
  width: 140px;
  display: flex;
  border: 1px solid red;
  height: 35px;
  word-break: break-all;
}

<div class="wrap">
  checkwheatherithasbeenwrapped
</div>