make html content go on next line automatically

Question

I am creating a chat application and in that I am dynamically populating the messages in a div

$('#conversation').append('<div class="message"><span><b>'+username+': </b>' + data + '</span></div>');

But the problem is if the message is too long, it is not going on the next line. I tried with

white-space:normal;

but no luck yet. Here is the dummy Fiddle

Anup · Answer 1 · 2015-04-01T08:31:25.490

2

DEMO

.message {
    white-space: normal;
    word-break: break-all;
}

edited Apr 01 '15 at 08:31

answered Jan 15 '14 at 08:02

Anup

9,396
16
74
138

score 1 · Answer 2 · answered Jan 15 '14 at 08:01

1

I think the css style you want to add is

word-wrap:break-word

answered Jan 15 '14 at 08:01

Jayson

940
8
14

score 1 · Answer 3 · answered Jul 01 '20 at 12:56

1

I think, you should to edit your code with this:

span{display:inline-block;}

answered Jul 01 '20 at 12:56

Zahra Shokri

11
2

OP posted a fiddle with his 6 year old question. If you tried it you should have seen that this does not work. you might want to look at how to create code examples in an answer so you can check out how the code behaves without leaving stackoverflow. The correct answer has been given here but OP didn't check back in to accept an answer – Sam Apostel Jul 01 '20 at 13:58

Sajad Karuthedath · Answer 4 · 2014-01-15T08:24:06.197

0

just use word-break: break-word;

DEMO

 .message {
        white-space:normal;
        word-break: break-word;
    }

refer http://css-tricks.com/almanac/properties/w/word-break/

http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Tips:

It is also often used in conjunction with the hyphens property so that when breaks occur a hypen is inserted, as per the standard in books.
     -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

edited Jan 15 '14 at 08:24

answered Jan 15 '14 at 08:04

Sajad Karuthedath

14,987
4
32
49

and what is the difference between word-break and word-wrap ? Both seem to give the same result – Ajey Jan 15 '14 at 08:14
1

@Ajey: please refer this post http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break – Sajad Karuthedath Jan 15 '14 at 08:15

make html content go on next line automatically

4 Answers4