Css 按单词断开文本，如果没有空格，则无论如何断开

如果可能的话，我正在试着一个字一个字地分解一个文本，如果没有的话，无论如何都要分解，这样布局就不会消亡。默认情况下，这在google chrome中可以正常工作并正确包装，但在firefox中不起作用

.a{
宽度：200px；
单词包装：打断单词；
显示：内联块；
空白：正常；
断字：断字；
}
.a>分区{
文本对齐：左对齐；
显示：内联块；
}

这是一个很好的解释，因为它是一个很好的解释这是一个很好的例子，它是一个很好的例子Teinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichri

添加

分词：全部分词

到子选择器（

.a>div

）

.a{
宽度：200px；
单词包装：打断单词；
显示：内联块；
空白：正常；
断字：断字；
}
.a>分区{
文本对齐：左对齐；
显示：内联块；
单词break：打破一切；
}

这是一个很好的解释，因为它是一个很好的解释这是一个很好的例子，它是一个很好的例子Teinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichri

添加

分词：全部分词

到子选择器（

.a>div

）

.a{
宽度：200px；
单词包装：打断单词；
显示：内联块；
空白：正常；
断字：断字；
}
.a>分区{
文本对齐：左对齐；
显示：内联块；
单词break：打破一切；
}

这是一个很好的解释，因为它是一个很好的解释这是一个很好的例子，它是一个很好的例子Teinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichri

您可以使用CSS3属性

overflow wrap

，这可能就是您要查找的内容。阅读更多，包括关于浏览器支持的内容，但要点是“与

分词

不同，

溢出换行

仅在整个单词无法放在自己的行中而不溢出时才会创建一个分词。”

还请注意，您拥有的200px的宽度不在包含长文本的div上，而是在.a父div上，并且具有长文本的div具有

display:inline block

，因此当前其宽度将由其内容决定，并且将溢出固定宽度。a父div。若要解决此问题，请提供内部div（

.a>div

）一个显式宽度（可以是200px，或者100%，或者您的布局实际需要的任何宽度），或者通过删除

display:inline block

和/或显式设置

display:block

使内部div显示为块

下面是一个工作片段，我在其中将.a>div作为内联块保留，并创建了另一个div.b，其中.b>div是一个块：

.a{
宽度：200px；
单词包装：打断单词；
显示：内联块；
空白：正常；
断字：断字；
}
.a>分区{
文本对齐：左对齐；
宽度：100%；
显示：内联块；
溢出包装：断开单词；
}
.b{
宽度：200px；
显示：内联块；
空白：正常；
}
.b>分区{
文本对齐：左对齐；
显示：块；
溢出包装：断开单词；
}

这是一个很好的解释，因为它是一个很好的解释这是一个很好的例子，它是一个很好的例子Teinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichri
这是一个很好的解释，因为它是一个很好的解释
span
  display: inline-block
  max-width: 100%
  overflow-wrap: break-word
  word-wrap: break-word