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

Question

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!

Answer 1

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/