HTML span contents stay on the same row - html

Question

Okay. So I have a div full of spans and every span has a word or a few inside. The div fits multiple rows and has a fixed width. I need the span contents to stay same on the same row, not to break so that one word in a span is on the first and the rest of the words on the next one.
Let me give you a small example.
HTML
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
CSS
div{
text-align:center;
width:400px;
}
span{
margin-right:10px;
}
Now the result I'm looking for is something like this:
Hamburgers Pizza and hotdogs
Milk and beer Kids menu
But what might happen is this:
Hamburgers Pizza and hotdogs Milk
and beer Kids menu
I tried setting white-space: no-wrap but that just set everthing on one row. I have a feeling that using the white-space: no-wrap the right way is the key, but I haven't got to it yet.
I hope you get the point what I'm trying to achieve and where I am now.

Answer 1

white-space: nowrap; will prevent any type of line wrapping. It sounds like you want to use non-breaking spaces in your titles, which will prevent the phrases from wrapping in the middle. For example:
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
Note: the is called an HTML entity. It will render just like a regular space character to the end-user, but it tells the browser to not allow words to be broken into multiple lines.

Answer 2

See this reference: W3CSchools white-space reference
You can apply white-space: pre to your spans using css. This will allow them to wrap on line-breaking white-space characters, but not other white-space characters.
div {
text-align: center;
width: 400px;
border: 1px solid red;
}
span {
margin-right: 10px;
white-space: pre;
}
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>