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

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.

Answer 2

What about nesting span inside other span?
What we achieve this way is rdquo acting just as a regular text (that means: if you put either no space or non-breaking space between rdquo and last word, it's not going to break into two lines).
Demo here: http://jsfiddle.net/HFE9T/1/

Answer 3

Instead of using additional span elements, try using :before and :after on paragraph like this:
p:after {
color: #aaa;
font-size: 50px;
position: absolute;
content: '”';
bottom: -30px;
}
p:before {
color: #aaa;
font-size: 50px;
position: absolute;
content: '“';
top: -10px;
}
Updated fiddle here

Answer 4

Here is the final markup and CSS to achieve the expected behaviour, inspired by Michal Rybak but without the compromises (except the two span in the markup) :
HTML :
<p>
<span class="quote" attr-char="“"> </span>
Paragraph content Here.
Note the no-line-break here.<span class="quote" attr-char="”"> </span>
</p>
The attr-char attribute is pretty handy to be able to change the quote characters for different languages as with the q element (somewhat)
CSS :
p .quote {
position: relative;
margin-right: 30px; /* Indent text at paragraph beginning */
}
p .quote:before {
position: absolute;
top: 10px;
line-height: 20px;
font-size: 50px;
content: attr(attr-char); /* Take the character from markup */
}
p .quote:last-child:before {
margin-left: 10px; /* Give the closing quote some space */
}
Fiddle :
http://jsfiddle.net/HFE9T/4/

Answer 5

You can add a non-breaking spaces \00a0 before and after the quotes:
<style>
element:before {content: "“\00a0";}
element:after {content: "\00a0”";}
</style>
And then work your way around with negatives margins if you don’t want those space to show.