Question

我在jsfiddle中有以下示例： https://jsfiddle.net/27L545rr/3/

<div contenteditable='true' style='word-break: break-all;'>
Word-break should cause just the extra character to wrap.  But just keep adding periods at the end until you wrap to see the bad char wrap.  All the periods AND the last letter wrap, this seems like a bug.
</div>

这只是一个令人满意的词，其中的分词属性设置为“全部破坏”。正如预期的那样，如果我输入一个长单词，它将会破坏该字符并继续下一行。但是，如果我添加一系列标点来导致中断，（。，＆＃39;！等），而不仅仅是下一行中出现的标点符号，它也会拖动最后一个非标点字母，完全出乎意料。这似乎是一个错误，但有没有一个解决方案来强制突破发生在行尾的最后一个字符？

Answer 1

根据specification，它按预期工作。 break-all 的规范说明：

除了“普通”软包装机会之外，线条可以在任意两个字母之间断开（除非'换行'属性禁止）。不应用连字符。 Link

进一步说：

出于本规范的目的，字母是属于Unicode中字母或数字常规类别之一的字符。 Link

因此，由于句号，感叹号，逗号和其他标点符号不被视为字母，即使存在一系列非字母，它也会将最后一个字母向下拉入下一行。您看到的行为不是错误，而是规范的正确实现。

Answer 2

解决方案是使用javascript将放在所有字符之间。在插入，删除，更改或复制文本时，您必须更新它。

问题：当按退格键时，它只会每隔一次删除一个字符。你也必须解决这个问题。

总而言之，我想这会非常难看，但它可以奏效。（如果值得的话）

使用带有标点符号的chrome中的js word-break break-all用法有问题

2 个答案: