Search code examples
htmlcssword-wrap

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

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 :

*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

Solution

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