How to break a line after some certain width in css

Question

I am designing a chat ui.

In my chat bubble when i enter a lot of characters it goes outside the bubble.

Are there any css techniques to break a line after certain width ?

Possible duplicate of [How to give line-break from css, without using
?](http://stackoverflow.com/questions/2703601/how-to-give-line-break-from-css-without-using-br) — theoretisch, Nov 25 '16 at 07:32

Sherly Febrianti · Accepted Answer · 2016-11-25T07:48:07.430

4

Try this :

.your-bubble {
    width: 250px; // width can be depend on you
    white-space: normal;
    word-break: break-word;
}

May this will help your problem

edited Nov 25 '16 at 07:48

answered Nov 25 '16 at 07:38

Sherly Febrianti

score 1 · Answer 2 · edited Nov 25 '16 at 08:27

1

p{
  width: 100px;
  border: 1px solid #111;
  word-break: break-word;
}

<p>some random text jfkdfjkd jkfdkf</p>

edited Nov 25 '16 at 08:27

Ryad Boubaker

answered Nov 25 '16 at 07:41

Rahul

1

If I'm designing a chat ui I would not use break-all. – Ryad Boubaker Nov 25 '16 at 07:42
I'm agree with @Ryad.iv, this wouldn't efective for chat apps – Sherly Febrianti Nov 25 '16 at 07:45
@IamNOOB Have you tried some text like : "HELLO I'M A REALLY LONG TEXT BLABLA BLABLABLA AND BLABLABLA, PLEASE TRY ME TO YOUR CHATTING BUBBLE WKAKA" ? And you see seperated words there – Sherly Febrianti Nov 25 '16 at 07:51
Oh i did not try it. WHat will be the solution for it then ? :( – IamNOOB Nov 25 '16 at 07:52
Use break-word; instead of break-all; – Ryad Boubaker Nov 25 '16 at 07:55
@Ryad.iv Maybe he like to make some fun with the user wkwkwk i think the user will be annoyed if the normal text was seperated – Sherly Febrianti Nov 25 '16 at 07:59

2 Answers2