当Tab键/间距移动到换行符的末尾

最近，我一直在使用内容可编辑div作为我正在处理的项目的文本框的一些问题。该项目是在前端使用Angular2构建的。当Tab键/间距移动到换行符的末尾

我一直在遇到的问题是，当我一直到标签/空格到内容可编辑div的末尾，而不是移动到下一行，而是不断添加出现在文本中积累的标签div的内容。我的意思是，如果一旦达到最终结果，我会按下Tab/Space键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一起使用的pre-wrap属性。无论如何要让这个工作，同时仍然能够使用该属性？

我想保留pre-wrap属性，因为它保留了从数据库中带有文本的对象中引入的所有空白区域。我通过pre-wrap的pre-line属性尝试了它，但当点击到可编辑的div时，导致文本跳转。我也试过使用word-break：break-all似乎可以工作，但是文本变得有点混乱。

另外，在旁注中，有没有人遇到过一个问题，即文本被突出显示时，他们无法在字符之间单击？这是一个奇怪的问题来形容，而且显然是一个难以追查的问题。会发生什么情况是，我会在div中键入一些文本，用光标突出显示它，然后如果我试图通过在字符之间单击来取消选择文本，它将不起作用。我将不得不单击一条当前未突出显示或完全不在元素之外的行，以取消选择任何突出显示的文本。

我原以为也许这是一个内容可编辑的问题，但它似乎在我链接的代码笔中工作正常，所以现在我不知道它是什么。

在此先感谢您的帮助！

来源

2017-08-17 Pilpod

您是否尝试添加“word-wrap：break-word;”？ – Jehoshuah

@Jehoshuah我尝试使用word-wrap：break-word，不幸的是，它仍然存在相同的问题。我想我尝试了每个单词包装的属性，并没有得到任何他们的工作。下面的答案使用了word-break：break-all确实解决了这个问题，但是当它到达容器的末端时，它也会打破所有的单词，这是我不想要的。 – Pilpod

你必须用字断解决您的issue.Modify你的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; 
}

这解决您的problem.Here是工作笔pen

请reffer this ans更多信息

来源

2017-08-17 05:07:28

这确实解决了标签/空格不会折断到换行符的问题，但是当它到达容器的末端时我们也希望避免它。无论如何要使用空格：pre-wrap和word-break：break-word属性一起使用，而当tab/spaces在到达容器的末尾时还会打破换行符？ – Pilpod

看到我更新的答案..我希望这是你需要的 –

不幸的是，没有。通过使用pre-wrap和break-word在一起，我得到了与之前相同的问题，在这种情况下，间距到容器的末尾不会换行。虽然使用'white-space：pre-line'似乎可行，但如果我使用pre-line属性在内容可编辑div中选择文本，则会导致它跳转。我试图找到一种方法来一起继续使用pre-wrap和break-word，但也会强制空格字符在到达容器末尾时跳到新行。 – Pilpod

当Tab键/间距移动到换行符的末尾

回答

相关问题