如何在 html 内容可编辑 DIV 中获得智能断词

Question

所以我正在使用一个内容可编辑的 DIV，我想实现一个智能断词功能，就像你在大多数文字处理器、Medium.com 等网站以及我在 Stack 上输入的那个框中看到的那样溢出

我所说的智能断词的意思是，如果你正在输入一个单词并且你即将打到 div 的末尾，那么它会将整个单词推到下一行，而不是仅仅断字。

关于如何做到这一点的任何线索？

谢谢！

Answer 1

您指的是“word wrapping”，其中单词被“换行”到下一行。这是自动完成的，所以如果您的 div 没有这样做，那么您可能会在其他地方遇到问题。发生这种情况的原因是因为div 会正常换行，即使它不是contenteditable，所以默认情况下会这样做。禁用自动换行的一种方法是，如果您的 CSS 中有 white-space: nowrap（更多信息请访问 How to turn off word wrapping in HTML?），但这似乎不太可能。