CSS属性“word-break：break-all”预计不会与Chrome中的特定字符一起使用

Question

我正在使用“word-break：break-all”在任何字符之间插入断点。 但是，在Chrome中，预计不会使用下面的特定字符（例如冒号，分号，逗号）。 （我的codepen在这里：https://codepen.io/yukito/pen/wobZJq）

源代码：

<style>
  .test {
    width: 300px;
    word-break: break-all;

    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

在FireFox和Safari中，它预计会正常运行。

我的问题： 。这是一个错误吗？还是一个规格？ 。如何在Chrome中连续分号之间划分界线？

谢谢。

Update:

考虑到像这支笔这样的单词边界，“break-word”会破坏行：https://codepen.io/yukito/pen/xRNopJ 我真的想在不考虑单词边界的情况下在任何字符之间插入断点。

Answer 1

对于webkit浏览器，您需要添加：

 .test {
      word-break: break-word;
    }

Demo

Answer 2

使用break-word属性而不是break-all。

看看下面的代码：

<style>
  .test {
    width: 300px;
    word-break: break-word;
  
    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

希望这可以帮助！