Html 在contenteditable div flex项中打断长行

我正试图让我的contenteditable div做以下几件事：

在div和按钮之间留出所有水平空间

当两个单词之间的行距太长时，请将其换行

仅当单词是单个长单词时，才在单词中间换行

我得到1和2或1和3的工作，但从来没有3个选项

如果我使用

word-break:break-all;

它适用于长单词，但当我有一个正常的句子时，它不会在单词之间缠绕

如果我不使用它，它会在单词之间切换，但不会在很长的单词上切换

如果我在chrome上使用，它将按预期工作：

word-break:break-word;

但这似乎不是一个标准的论点

文章{
显示器：flex；
背景色：红色；
填料：1米1米1米1米1米；
}
div{
背景色：#fff；
边框：1px实心#000；
flex:100px；
单词包装：打断单词；
溢出包装：断开单词；
单词break：打破一切；
}

应该只在此处剪切空格mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
发送




应该在这里的任何地方切割吗？mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
发送

所以它应该切入并突破到一条新线？我的目标是以一种“聪明”的方式切入。在单词之间优先剪切（如果有必要，因为行太长），如果没有空间进行剪切，则仅在单词中间剪切。