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

Question

我有以下 2 个 HTML 语句。我希望“p”标签不换行到下一行。但我确实希望它包含在后续行中。 (所以我不能使用 nowrap 风格)。我想创建两个 CSS 类以区别对待每个类。

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

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

编辑:

好的。我正在使用 James 的建议并且它正在工作，除了我似乎无法更改我的行之间的行间距。当我使用边距或行高时，它们会被忽略。所以，James 的建议代码大部分都有效......

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

进一步编辑:我的问题围绕着我正在使用 jQuery Mobile 这一事实。因此，根据视口(viewport)，您的解决方案仅在某些时候有效(对于某些视口(viewport))。快把我逼疯。如果您有任何想法，我将不胜感激。

Answer 1

只需将两者包装在同一个 p 元素中，并将 .mscFlapText 放在 span 中:

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

JSFiddle demo .

值得注意的是 the specification将 p 定义为分组内容，将 b 定义为文本级语义；它们并非旨在相互内联。