當Tab鍵/間距移動到換行符的末尾

Question

最近，我一直在使用內容可編輯div作爲我正在處理的項目的文本框的一些問題。該項目是在前端使用Angular2構建的。

我一直在遇到的問題是，當我一直到標籤/空格到內容可編輯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中鍵入一些文本，用光標突出顯示它，然後如果我試圖通過在字符之間單擊來取消選擇文本，它將不起作用。我將不得不單擊一條當前未突出顯示或完全不在元素之外的行，以取消選擇任何突出顯示的文本。

我原以爲也許這是一個內容可編輯的問題，但它似乎在我鏈接的代碼筆中工作正常，所以現在我不知道它是什麼。

在此先感謝您的幫助！

Answer 1

你必須用字斷解決您的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更多信息