html - word wrap, word break 不适用于 firefox 中的 display flex

Question

我有一个内容div，它的文本可以是任意大小。我的意图是内容不会从 div 溢出。它应该根据容器宽度自动换行。我需要 word-break:break-word 属性才能完成我的任务。 Firefox 自动添加了一个名为 overflow-wrap 的属性，但似乎它在带有 flex 属性的 firefox 中不起作用。如果删除 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>

fiddle link .

请仅提及 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>