Matthew Dewhurst Matthew Dewhurst - 2 months ago 8
CSS Question

Re-line long strings and replace with shorter strings

I'm creating a page where a user can input a random comment and it should display the comment below. (as seen below)
The problem I have is that I want to make all the boxes fit within the page. For example, the longer strings should move to a new line and be replaced with shorter strings, etc.

enter image description here

At the moment I have each output as a whilst I test.
Any help will be appreciated!

Answer

You can use white-space: nowrap;.

Demo:

div {
  display: inline-block;
  white-space: nowrap;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #333;
}
<div>
  Content goes here.
</div>
<div>
  Content goes here.
</div>
<div>
  Content goes here. Content goes here. Content goes here.
</div>
<div>
  Content goes here.
</div>

As far as re-ordering the elements to fill the gaps, you might need JavaScript.