自动换行，单词分解无法在firefox中使用display flex

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴link。

请仅提及css修复

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个css

-ms-word-break: break-all;
   word-break: break-all;