html - 如何使段落中的最后一个 span 元素不换行？

Question

我有一段被装饰性引号包围的段落。布局是流畅的，对于某些宽度，只有装饰性引号是环绕的，我想避免这种情况。

截图:

代码:http://jsfiddle.net/84EDh/1/ (注意:未在 Chrome 之外测试)

<p>
    <span class="bigchar ldquo"></span>
    Begin paragraph [...paragraph content...] end paragraph.
    <span class="bigchar rdquo"></span>
</p>

CSS:

p { position: relative; }
.bigchar {
    display: inline-block;
    width: 20px;
}
.bigchar:after {
    color: #aaa;
    font-size: 50px;
    position: absolute;
}
.ldquo:after {
    content: '“';
    top: -10px;
}
.rdquo:after {
    content: '”';
    bottom: -30px;
}

可能的解决方案:

用另一个span中的closing span包裹最后一个词

[...paragraph content...] end 
<span class="nowrap">
    paragraph.
    <span class="bigchar rdquo"></span>
</span>

问题:

有没有更优雅的方法来实现段落最后一个 span 的不换行？

这不是很语义化，也不容易实现，因为正如您所期望的那样，段落的内容是动态的，因此不容易在模板级别拆分。

编辑:添加了 css

Answer 1

与其使用 span，不如使用 q，因为这就是 q 元素的设计目的!

所以 HTML 变成了

<p><q class="bigchar">This text is surrounded by quotes. I want
the text to wrap according it's parent width. This is no problem,
it's the default behaviour. However, I would like to avoid the
last span, containing a decoration quote, to wrap.</q></p>

使用 CSS

q.bigchar::before {content:'\201C'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-right:.13em;}

q.bigchar::after {content:'\201D'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-left:.13em;}

导致 this fiddle .

不需要额外的标记。

请注意，由于我单独留下了 p，您可以在其上放置各种样式(如 text-indent)，它会正常运行。