contenteditable div佔位符的文字換行

Question

我在contenteditable div中有一個佔位符字符串。該字符串不以正常的方式顯示。這些單詞在一行的結尾處被打破。 請幫忙。我只需要在比線更長的時候才能打破這些詞，否則，這個詞應該從下一行開始。我已經在框中添加了單詞warp，但似乎不起作用。

HTML：

<div contenteditable="true" id="box"></div> 

CSS：

#box:empty:not(:focus):before{ 
    content:"hello thank you thank you very much hello thank you thank you very much how are you"; 
    font-style:italic; 
    color:red; 
} 
#box{ 
    white-space: pre; 
    border:1px solid lightgrey; 
    height: 250px; 
    width: 350px; 
    word-wrap:break-word; 
    overflow: auto; 
} 

jsfiddle

Answer 1

的white-space屬性用於描述在元件內部的空白是如何處理的。您可以閱讀white-space文檔。

更改您的代碼：

#box{ 
    white-space: normal; 
    /* white-space: pre-line; */ 
    border:1px solid lightgrey; 
    height: 250px; 
    width: 350px; 
    word-wrap:break-word; 
    overflow: auto; 
} 

UpdatedFiddle 也CSS-tricks有一羣很好的例子來解釋white-space。