使用span和p标记防止换行符

Question

我有一些CSS插入破折号，unicode U + 2014 - ，在my site之前在声明的来源之前提供了一个很好的格式。令人讨厌的是，它在此之后打破了一条新线（我尝试从跨度改为div但没有用）。

文档树如下所示：

<span class="source">...</span>
<p>Source author, text goes here etc. etc.</p>

span行的计算样式包括display:inline，而p的计算样式有display:block，我猜这可能会导致新行？

我正在阅读相关的CSS，看不出为什么要开始换行，我没有\A in the content as in this question ...

任何CSS专家都可以指出我缺少的东西吗？或许需要::before伪元素的替代实现？

这里涉及的CSS是

div.source:before{content:"\2014";margin-left:0.9em;margin-right:0.9em; white-space:nowrap;}#content

（我插入了white-space：nowrap，前一段时间试图修复此问题，但它没有对新行做任何事情）

Answer 1

为什么不直接将class="source"添加到p标记，而不是添加不必要的span？

您现在看到的行为是正确的，因为p元素是默认的块级元素。你可以给它一个display: inline;样式，但正如我上面提到的，最好摆脱span并将类添加到p标签。

Answer 2

您可以尝试使用相邻的兄弟选择器（+），如下所示。 IE＆gt; = 7支持它。

<强> HTML：

<span class="source">&mdash;</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>

<强> CSS：

.source + p{display: inline;} 
/* applies inline style to only the <p> tag directly following a tag with class=source */

Fiddle Demo | Browser Support