制表符/间距到 contenteditable div 的末尾时移动到换行符

Question

最近，我在使用内容可编辑 div 作为我一直在从事的项目的文本框时遇到了一些问题。该项目是在前端使用 Angular2 构建的。

我一直遇到的问题是，当我一直到选项卡/空格直到内容可编辑 div 的末尾，而不是移动到下一行时，它反而不断添加似乎在文本内容中累积的选项卡的div。我的意思是，如果我在到达末尾时按了 4 次制表符/空格键，那么我将不得不退格 4 次以清除它们。

<div class="text-box" contenteditable="true"></div>

body
{
  background-color: black;
}

.text-box
{
  background-color: white;
  color: black;
  height: 200px;
  width: 200px;
  margin: auto;
  white-space: pre-wrap;
}

https://codepen.io/anon/pen/YxYNYW

我包含的代码笔演示了这个问题。如果您只是在框内单击然后按住空格键，一旦光标到达末尾，它将不会移动到换行符。我意识到这与我与内容可编辑 div 一起使用的 white-space: pre-wrap 属性有关。有没有办法让它在仍然能够使用该属性的同时工作？

我想保留 pre-wrap 属性，因为它保留了从数据库中带有文本的对象引入的所有空白。我在 pre-wrap 上使用 pre-line 属性进行了尝试，但这导致文本在单击可编辑 div 时跳转。我也尝试过使用 word-break: break-all ，这似乎可行，但文本有点混乱。

顺便说一句，有没有人遇到过在突出显示文本后无法在字符之间单击的问题？这是一个描述起来很奇怪的问题，而且显然是一个很难追查的问题。发生的情况是我将在 div 中键入一些文本，用光标突出显示它，然后如果我尝试通过单击字符之间来取消选择文本，它将不起作用。我将不得不单击当前未突出显示或完全在元素之外的行以取消选择任何突出显示的文本。

我原本以为可能是内容可编辑问题，但在我链接的代码笔中似乎工作正常，所以现在我不确定它是什么。

提前感谢您的帮助！

Answer 1

您必须使用分词来解决您的问题。修改您的 css，如下所示

body
{
  background-color: black;
}



  .text-box
{
  background-color: white;
  color: black;
  height: 200px;
  width:150px;
  margin: auto;
  white-space: pre-wrap;
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     white-space: pre-wrap;       /* css-3 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
     word-break: break-word;
     white-space: normal;
}

这解决了你的问题。这是工作笔pen

更多信息请参考this ans