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;を使用しないでください。これは、それが部門を離れることがないことを確認します。

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+ */ 
}