Css style to avoid inserting line breaks

Question

My html looks something like this:

<p>blah blah blah blah blah blah <b>something that I want 
on a single line</b> blah blah blah</p>

I want to somehow communicate that I want the bold section to start a new line if and only if it can't fit onto the current line. Basically I need a way to say "don't split this across lines if theres any possible way to avoid it"

Is there any facility in html or css to express this?

Answer 1

Try setting white-space: nowrap; on the <b> tag.

Answer 2

You can add non-breaking spaces -   - between the words, i.e.

<p>blah blah blah blah blah blah
<b>something&nbsp;that&nbsp;I&nbsp;want&nbsp;on&nbsp;a&nbsp;single&nbsp;line</b> blah blah blah</p>

Answer 3

You can use non breaking spaces between the words by using  .

Answer 4

You can use the CSS white-space property with the nowrap value to acheive this.

In your case:

b{
    white-space:nowrap;
}

I'd recommend using the <strong> tag rather than the <b> also since the former is semantically more correct.