CSS属性"word-break: break-all“不能正常处理Chrome中的特定字符

Question

我使用"word-break: break-all“在任意字符之间插入分隔符。

然而，在Chrome中，它不能像下面这样处理特定的字符(例如冒号、分号、逗号)。

(我的副手在这里：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中，它正常工作。

我的问题：

。这是个bug吗？还是说明书？

。在Chrome中如何在连续的分号之间换行？

谢谢。

更新：

"break- word“在考虑单词边界的情况下中断行，就像这支笔：https://codepen.io/yukito/pen/xRNopJ

我真的想在任何字符之间插入分隔符，而不考虑单词边界。

Answer 1

使用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>

​

希望这能有所帮助！

Answer 2

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

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

Demo