使用 span 和 p 标签防止换行符答案

【问题标题】：Prevent newline break with span and p tag使用 span 和 p 标签防止换行符
【发布时间】：2013-10-29 00:55:39
【问题描述】：

我有一些 CSS 插入一个破折号，unicode U+2014 —，以便在声明的源之前在 my site 上提供一个很好的格式。令人讨厌的是，在此之后它会换行（我尝试从 span 更改为 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 前段时间试图解决这个问题，但它对新行没有做任何事情）

【问题讨论】：

你试过p{display: inline;}吗？ this是你想要的吗？
这是因为<p> 默认是块级元素，这意味着它将占据其父元素的 100% 宽度，因此会强制自己换行。也许@Harry 的建议会奏效。
当我读到这篇文章时感到畏缩，因为它基本上是解决方案，我想我是个白痴，但后来我尝试了它，并且有多个
标签（即说明来源后的更多段落）所以我只是想弄清楚我是否需要 nth-of-type / first-child 来制作第一个显示：inline，但这感觉有点过于复杂了......
由于某种原因它弄乱了 p 边距，使用 nth-of-type 摆脱了下方块引用部分的滚动条，但要尝试史蒂夫的建议... div.source p:nth- of-type(1){display:inline}
@lmmx：就像我刚刚在史蒂夫的回答中提到的那样。他的方法是更好的一种，但请注意您要支持的浏览器列表。如果 IE :before、:nth-child 等会造成麻烦。

标签： html css

【解决方案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 */

Fiddle Demo | Browser Support

【讨论】：

和 div.source p:nth-of-type(1){display:inline} 效果一样？
是的，会的。你检查过小提琴吗？
是的，它在我的实际站点中表现得有点滑稽，我只是看看需要修改的地方
检查this小提琴。它还根据需要放置破折号。我不确定还有什么在您的网站上造成了麻烦。如果您可以使用有助于分析的确切代码更新小提琴。（&mdash; 与\2014 相同）
那是奇怪的伙伴。你能在小提琴中模拟这个问题吗？另外，我想您会注意到在我的回答中.source 之前缺少div。这是因为在我们的例子中带有class=source 的元素是span。

【解决方案2】：

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

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

【讨论】：

我同意你的看法。虽然我只是试图解决问题，但您提到的是更好的处理方法。但是，唯一需要检查的是浏览器对 :before 伪的支持（我想到了 IE：D）
我想使用它，但我正在使用 Tumblr 来管理我的帖子（尽管尽我所能隐藏它）并且它不允许您更改主题中的 p 级属性。源部分如下所示：{block:Source}
{Source}{/block:Source}
有没有办法将 class="source" 从 div 标签应用到子元素？