Keep a line of text as a single line - wrap the whole line or none at all

I'd like to keep a line of text together such that either the whole line drops down a line or none at all

Acceptable

How do I wrap this line of text - asked by Peter 2 days ago

Acceptable

How do I wrap this line of text 
- asked by Peter 2 days ago

Not acceptable

How do I wrap this line of text - asked by Peter 
2 days ago

Is this achievable in CSS?

Solution 1:

You can use white-space: nowrap; to define this behaviour:

// HTML:

.nowrap {
  white-space: nowrap ;
}

<p>
      <span class="nowrap">How do I wrap this line of text</span>
      <span class="nowrap">- asked by Peter 2 days ago</span>
    </p>

// CSS:
.nowrap {
  white-space: nowrap ;
}

Solution 2:

You could also put non-breaking spaces (&ampnbsp;) in lieu of the spaces so that they're forced to stay together.

How do I wrap this line of text
- asked by Peter 2 days ago