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