8

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!

Arieleo
  • 381
  • 3
  • 14
  • I don't see an issue with Chrome. – ngen Jul 30 '11 at 07:24
  • I got what you meant by the issue, you wanted closing quote right by the last word, not on edge of the box. I have answered below including an updated fiddle. – Liam Bailey Jul 30 '11 at 07:43
  • 1
    ngen - the issue is that on example #4 the closing mark is very far from both words. I'd like it to be aligned next to "mathematica". – Arieleo Jul 30 '11 at 09:29

2 Answers2

2

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/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • I usually prefer not to rely on scripting for css fixes, but in this case it's ok since no scripting-support means that it will only degrade somewhat gracefully, and not break the layout. I've added 1 to var 'a' so row 1 will stay as one line. Here - http://jsfiddle.net/kTQqC/18/ Thanks! – Arieleo Aug 03 '11 at 19:28
  • Great @Arieleo. Glad to help. If this answers it, feel free to click the checkmark to let others know it is answered. – Jason Gennaro Aug 03 '11 at 19:59
  • 1
    Whoever downvoted this answer just now... could you explain why? I don't mind being downvoted if it warrants it, but I like to know why. I don't want to make the same mistakes in the future. Strange, though, as the OP accepted this as a good? – Jason Gennaro Sep 18 '11 at 13:52
  • +100 Been looking for this ages, thanks! Very useful for chat bubbles that need to shrink to fit the wrapping text inside. – Dunc Oct 09 '14 at 09:57
-1

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.

Liam Bailey
  • 5,879
  • 3
  • 34
  • 46
  • Thanks Liam, but I am looking for a different appearance. I know the closing mark is usually next to the last word, but in this design I'd like it to be outside of the shrinked-to-fit box that contains the text. Thanks for the effort though! – Arieleo Jul 30 '11 at 09:33