1

我正在使用“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 中，它按预期工作。

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

谢谢你。

更新：

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

4

2 回答 2

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>

希望这可以帮助！

于 2016-12-26T10:04:26.573 回答
0

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

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

演示

于 2016-12-26T10:02:19.460 回答