Can't break a long string/text, it exceeds the width of html div

Question

<div id="id_div_comments"><p>body4qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p></div><br/><br/>
</div>

The css file:

div#id_div_comments {
    width: 400px;
}

But the string/texts exceeds the division width. What can i do to break the texts when it reaches the width of the division ?

Related thread - http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table/1258478#1258478 — KV Prajapati, Sep 29 '11 at 06:25
I found this solution better for most of the cases - http://stackoverflow.com/a/764015/2063659 — Anon30, Feb 04 '15 at 05:34

score 33 · Accepted Answer · answered Sep 29 '11 at 06:24

33

wirte this in your css word-wrap:break-word; css:

#id_div_comments p{
 word-wrap:break-word;
}

answered Sep 29 '11 at 06:24

sandeep

91,313
23
137
155

1

The support for "word-wrap: break-word" is still buggy in most browsers, unfortunately. (https://code.google.com/p/chromium/issues/detail?id=249787&thanks=249787&ts=1371225408) It does work in simple cases, though. "overflow: auto" does not (nor is supposed to) break words at all, it just adds a scrollbar if needed – matteo Jun 14 '13 at 16:07

score 7 · Answer 2 · answered Jan 27 '15 at 09:40

7

Try this code:

#id_div_comments p{
 white-space:normal;
}

answered Jan 27 '15 at 09:40

rajesh

1,475
10
23

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

3

The accepted answer doesn't work for me

After seaching around, the following css actually works

#id_div_comments p{
 overflow: hidden;
}

Just trust me

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 14 '18 at 05:01

Fangming

24,551
6
100
90

This is exactly what I was looking for! – Valchy Mar 04 '21 at 09:01

score 3 · Answer 4 · answered Oct 18 '21 at 13:53

3

Old question but no correct answer, for long text this should work

#id_div_comments p{
 word-break: break-all;
}

answered Oct 18 '21 at 13:53

NerdBiz

43
4

Can't break a long string/text, it exceeds the width of html div

4 Answers4

The accepted answer doesn't work for me