如何使段落中的最后一个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;
}

可能的方法:

用另一个跨度中的结束跨度包裹最后一个单词

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

题:

是否有一种更优雅的方式来实现span段落末尾的无包装？

这不是很语义,也不容易实现,因为正如您所料,段落的内容是动态的,因此在模板级别不容易分割.

编辑:css补充说

Answer 1

span嵌套在 other 内部怎么样span？

我们通过这种方式实现的效果是 rdquo 就像常规文本一样（这意味着：如果您在 rdquo 和最后一个单词之间不放置空格或不间断空格，则它不会分成两行）。

演示在这里： http: //jsfiddle.net/HFE9T/1/