Empty space right of the text if only max-width set

Question

I have a problem with basics of css. I want to show message in chat like WhatsApp or other chat apps. If text is shorter than max-width of the container, it works fine. But if this text is longer than max-width, than text is wrapped on new lines and takes max-width of the container, even if every its string is shorter. It looks like empty space right of the text.

What is the best way to show messages in my case? Is it possible without scripts?

.container {
  max-width: 400px;
  background: green;
}

<div class="container">
      test_test_test_test_test_test_test_test test_test_test_test_test_test_test_test 
      test_test_test_test_test_test_test_test test_test_test_test_test_test_test_test
</div>

I want the text content to occupy the width it really needs. How to do it, unfortunately I do not know. — V. Perfilev, May 05 '21 at 12:09

score 2 · Accepted Answer · answered May 05 '21 at 12:09

I'm not clear on what the behaviour you are expecting is. When there are long words, the text must wrap over multiple lines if the container cannot grow.

However, there is a CSS property named word-break that allows you to dictate how the words behave when breaking over to the next line.

In this case, using word-break: break-all will specify that the text can fill the remaining space and break mid-word onto the next line. This is shown in the snippet below:

.container {
  max-width: 400px;
  background: green;
  word-break: break-all;
}

<div class="container">
      one_one_one_one_one_one_one_one_one_one two_two_two_two_two_two_two_two_two_two 
      three_three_three_three_three_three_thr four_four_four_four_four_four_four_four
</div>

score 1 · Answer 2 · answered May 05 '21 at 12:09

1

If you have so long words, there is one ugly hack, set display: table-caption. I don't see better solution...

Maybe, you should work with real texts and not with 300px long words.

.container {
  max-width: 400px;
  display: table-caption;
  background: green;
}

<div class="container">
      test_test_test_test_test_test_test_test test_test_test_test_test_test_test_test 
      test_test_test_test_test_test_test_test test_test_test_test_test_test_test_test
</div>

answered May 05 '21 at 12:09

pavel

26,538
10
45
61

Long words it's the worst case. Of course real content of the chat has usually other words. Thank you, I'll read about this "table-caption". – V. Perfilev May 05 '21 at 12:12
1

It works but it's really ugly hack (`display: table-caption` isn't for this type of task), I can't say it's a 'solution'. Maybe you should consider `word-wrap` and work will full 400px width. – pavel May 05 '21 at 12:15
Okay, I understood that only one way to do is to handle text with a script. I noticed that Viber show long words with empty spaces too, although I was sure that they solved this problem. Thank you for our answer! – V. Perfilev May 05 '21 at 12:24
@V.Perfilev There are more options: this one hack, word-wrap, putting space after Xth char, putting triple dot between Xth and Yth char (typically long URLs, https://example.com/dir...contact.php), divide long words and the end of line - https://mnater.github.io/Hyphenator/, etc. Depends on your use case. – pavel May 05 '21 at 12:27

Empty space right of the text if only max-width set

2 Answers2