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。

contenteditable div占位符的自动换行

1 个答案: