Force a line break in a div

Question

I have a chat conversation within a div, but very long words fall out. I was advised to use an i-frame, but how? I thought this is for external websites.

jsFiddle Code

CSS

.chat{
   width: 230px;
   height: 310px;
   margin-left: 10px;
   background-color: grey;
   border: solid 1px black;
   color: #1855a3;
   overflow-y: scroll;
}

@wesley - I deleted the comment after reading the duplicate suggestion. that looks much better — Kai Qing, May 31 '13 at 16:29

score 17 · Accepted Answer · answered May 31 '13 at 16:29

17

try to add word-wrap:break-word; in your css

answered May 31 '13 at 16:29

math487

253
1
2
10

score 3 · Answer 2 · answered May 31 '13 at 16:28

3

Add the CSS rule: word-break:break-word;

jsFiddle example

answered May 31 '13 at 16:28

j08691

204,283
31
260
272

3

Same as the suggested duplicate. – Wesley Murch May 31 '13 at 16:30

score 1 · Answer 3 · answered May 31 '13 at 16:29

1

Use word-wrap: break-word; - works in all browsers.

http://jsfiddle.net/adamh/TWsqQ/5/

answered May 31 '13 at 16:29

Adam Hopkinson

28,281
7
65
99

2

Same as the suggested duplicate. – Wesley Murch May 31 '13 at 16:29

score 0 · Answer 4 · answered May 31 '13 at 16:31

What I believe you're trying to do is prevent horizontal scroll.

You can easily do this with using overflow-x: hidden; and word-wrap: break-word; so that the long words will breaks into a new line.

CSS:

.chat{
   width: 230px;
   height: 310px;
   margin-left: 10px;
   background-color: grey;
   border: solid 1px black;
   color: #1855a3;
   overflow-y: scroll;
   overflow-x: hidden;
   word-wrap: break-word;
}

See an example here: http://jsfiddle.net/TWsqQ/10/

Force a line break in a div

4 Answers4