如何创建两个CSS类并防止换行

Question

I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.

   <b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>

   <p class= "mscFlapText" id='flap0'>This is the Flap text </p> 

EDIT:

OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....

<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>

Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.

Answer 1

Simply wrap both in the same p element and place .mscFlapText within a span instead:

<p>
    <strong class="mscFlapSumBold" id="flapSum0">...</strong>
    <span class="mscFlapText" id="flap0">...</span>
</p>

JSFiddle demo .

It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics ; they aren't designed to go inline with each other.

Answer 2

You can use:

p.mscFlapText {
    display: inline;
}

But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.

Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.