contenteditable div 占位符的自动换行

Question

我在 contenteditable div 中有一个占位符字符串。该字符串没有以正确的方式显示。单词在行尾断了。请帮忙。仅当单词比行长时，我才需要将其断开，否则，该单词应从下一行开始。我已在框中添加了单词扭曲作为断词，但似乎不起作用。

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属性用于描述如何处理元素内的空白。您可以阅读空白文档。

将您的代码更改为：

#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。