html - span タグと p タグで改行を防ぐ

Question

私はダッシュ、Unicode U+2014 — を挿入するいくつかの CSS を持っています。面倒なことに、この後に新しい行が改行されています(スパンからdivに変更しようとしましたが、使用できません)。

ドキュメント ツリーは次のようになります。

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

行の計算されたスタイルにはspanが含まれていますが、計算された行display:inlineのスタイルにpは has がありdisplay:block、これが新しい行を引き起こしている可能性がありますか?

関連する CSS を読んでいますが、新しい行を開始する理由がわかりません。この質問のようにコンテンツに \A がありません...

CSS の達人は、私が欠けているものを教えてくれますか? ::beforeおそらく疑似要素の代替実装が必要ですか？

ここに含まれる CSS は、

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

（これを修正しようとして少し前に空白：nowrapを挿入しましたが、新しい行には何もしませんでした）

Answer 1

以下に示すように、隣接する兄弟セレクター ( +) を使用してみてください。IE >= 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 */

フィドルのデモ| ブラウザのサポート