Multiline inline-block becomes a block and ruins my nifty quote effect

I'm trying to create a block quote that has huge quotation marks on it's sides. The text content of the block quote is dynamic and so the marks should align according to it's size.

I've used an inline-block element so it will shrink-to-fit and contain it's text, and I'm 90% there, but my only problem is that an inline-block element becomes a block element when it has multiple lines.

To illustrate why this is a problem, I've made jsfiddle snippet:

http://jsfiddle.net/kTQqC/1/

As you can see, most of the blocks look right:

1. Single line - no problem. The closing mark attaches itself to the last word.
2. Multiple lines - The blockquote takes full available width. Still, not much of a problem.
开发者_运维技巧
3. Same as 2, just shorter words.
4. Here is where it get's tricky. Since the inline-block element becomes a block element - it takes full available width and ruins the effect by putting the closing mark really far.

I have no control on the content's length of words. Sometimes example 4 will occur.

Does anyone have an idea how to solve this? I am also willing to throw away all of this code if you have a completely different approach to get the same effect.

Thanks!

If you are willing to use a bit of scripting, you could do the following:

Put your text in a span with a class, like so...

<span class="words">1. Hello</span>

Then get the width of each span and dynamically adjust the max-width

$('span.words').each(function(){
    var a = $(this).width();
    $(this).parent().css('max-width', a + 'px');
});

http://jsfiddle.net/jasongennaro/kTQqC/15/

Sorted: http://jsfiddle.net/kTQqC/14/

A span element will automatically be inline displayed, so your closing quote should automatically have been right beside your last word. I took your relative positioning off your blockquote element, and quote element. This left the spans sitting just a little up from the first/last words (as in too high) so I pushed them down using relative positioning on them individually, 10px for the opening, leaving it just above the first word, and 18px for the closing quote leaving it hanging below the last word. This is how these are when you see them in magazines.