DIV中的文本并不总是换行

Question

我已经创建了可编辑的DIV here。文本是换行的，就像我想要的那样。但是，我注意到，只有当文本是纯文本时，文本才会换行。在下面的图像中，我粘贴了一些带有标记的文本--它没有换行。我能解决这个问题吗，让DIV中的文本总是换行？

可编辑DIV的代码：

.editableDiv {
  padding: 5px;
    -webkit-user-modify: read-write;
    -moz-user-modify: read-write;
    user-modify: read-write;     
    word-wrap: break-word;
  box-sizing: border-box;
  background-color: #FAC28A;  
    color: #003399; 
}

​

​

Answer 1

为什么不尝试在.spanDateEventHeader类上使用word-wrap: break-word;呢？这将确保它不会离开Div。

Answer 2

显然，您使用的是pre元素。

快速解决方案是在pre元素上使用空格属性。

将这个添加到你的css中：

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}