Geek Answers Handbook

A multi-line inline block becomes a block and ruins my excellent quote effect

I am trying to create a block quote that has huge quotes on it. The text content of the block quote is dynamic and therefore the labels must align to this size.

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

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

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

As you can see, most blocks look right:

  • A single line is not a problem. The final mark joins the last word.
  • A few lines. Blockot is fully available. width. However, this is not a big problem.
  • Same as 2, only shorter words.
  • That's where it gets complicated. Since an inline block element becomes a block element, it gains the full available width and destroys the effect by actually placing a close sign.

I do not control the length of the content of words. Sometimes example 4 appears.

Does anyone have any ideas how to solve this? I also want to throw away all this code if you have a completely different approach in order to get the same effect.

Thanks!

+7
source share
2 answers

If you want to use a few scripts, you can do the following:

Put the text in a span with a class like ...

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

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

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

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

+1
source

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

The span will automatically appear in the line, so your final quote should automatically be next to your last word. I took your relative positioning from your blockquote and quote element. This left gaps that sat just above the first / last word (as too high), so I pushed them, using relative positioning on them individually, 10 pixels for opening, leaving it just above the first word, and 18 pixels for closing the quote, leaving her hanging under the last word. This is how it happens when you see them in magazines.

0
source

More articles:


All Articles