Question

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

我遇到的问题是当我一直到标签/空格一直到内容可编辑div的末尾，而不是移动到下一行时，它会继续添加看似在文本内容中累积的标签的div。我的意思是，如果我一旦到达结束时击中标签/空格键4次，我将必须退格4次以清除它们。

$(function () {
    $('.datepicker').datepicker({
        "autoclose": true
    }).filter(function(){
        //filter just the ones that do not have a value
        return ( '01/01/0001' === this.value || ( this.value || '' ).trim().length < 1 )
    }).datepicker("setDate", new Date());
});

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

我包含的代码笔演示了这个问题。如果您只是在框内单击然后按住空格键，一旦光标到达结尾，它将不会移动到换行符。我意识到它与白色空间有关：我使用内容可编辑div的预包装属性。无论如何，仍然能够使用该属性才能使其工作？

我想保留预包装属性，因为它保留了从数据库中带有文本的对象引入的所有空白区域。我尝试使用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了解更多信息

标签/间距到可信任div的结尾时移动到换行符

1 个答案: