How to make the last span element inside a paragraph no-wrap?

Question

I have a paragraph surrounded by decorative quotes. The layout is fluid, and for some width, only the decorative quote is wrapping, which I want to avoid.

Screenshot :

Code : http://jsfiddle.net/84EDh/1/ (Note: not tested outside of 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;
}

Possible solution:

Wrap the last word with the closing span in another span

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

Question:

Is there a more elegant way to achieve the no-wrapping of the last span of the paragraph ?

This is not very semantic, nor easy to achieve because, as you would expect, the content of the paragraph is dynamic, hence not easy to split at the template level.

Edit: css added

Answer 1

Instead of using a span, it's better to use a q, because that's what q elements were designed for!

So the HTML becomes

<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>

with the 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;}

resulting in this fiddle.

No extra markup is needed.

Note that since I leave the p alone, you can put all kinds of styles (like text-indent) on it, and it will behave as it should.