Text inside DIV doesn't wrap always

Question

I've created editable DIV here. Text is wrapping, just like I wanted. But, what I've noticed is that text is wrapping only if it is plain text. On the image below I've pasted some text with markup - and it doesn't wrap. Can I solve this, so text inside DIV will always wrap?

Code for editable 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; 
}

Is that text in a `pre` tag? because: http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag?rq=1 — Heretic Monkey, Aug 18 '16 at 17:37

score 0 · Answer 1 · answered Aug 18 '16 at 18:00

0

Why don't you try using word-wrap: break-word; on .spanDateEventHeader class. This would make sure it doesn't leave the Div.

answered Aug 18 '16 at 18:00

theLearner

363
4
16

score 0 · Answer 2 · edited Aug 18 '16 at 18:13

0

You are obviously using pre element.

Quick solution is to use white-space property on pre element.

Add this to your 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+ */
}

edited Aug 18 '16 at 18:13

Vcasso

1,328
1
8
14

answered Aug 18 '16 at 18:00

Roktheman

1
4

I don't use pre element. Only DIV. – FrenkyB Aug 19 '16 at 09:53

Text inside DIV doesn't wrap always

2 Answers2