Многострочный встроенный блок превращается в блок и разрушает мой изящный эффект кавычек

Я пытаюсь создать цитату с большими кавычками по бокам. Текстовое содержимое цитаты блока является динамическим, поэтому метки должны выравниваться в соответствии с его размером.

Я использовал элемент встроенного блока, чтобы он сжимался по размеру и содержал его текст, а мне 90 % там, но моя единственная проблема в том, что встроенный блочный элемент становится блочным элементом, когда он состоит из нескольких строк .

Чтобы проиллюстрировать, почему это проблема, я сделал фрагмент jsfiddle:

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

Как видите, большинство блоков выглядят правильно:

  1. Одна строка - нет проблем. Закрывающая метка прикрепляется к последнее слово.
  2. Несколько строк - цитата занимает весь доступный ширина. Тем не менее, это не большая проблема.
  3. То же, что и 2, только более короткие слова.
  4. Вот где это бывает сложно. Поскольку элемент inline-block становится блочным элементом - он занимает всю доступную ширину и портит эффект, помещая закрывающую метку слишком далеко.

Я не могу контролировать длину слов в содержимом. Иногда встречается пример 4.

Кто-нибудь знает, как это решить? Я также готов выбросить весь этот код, если у вас есть совершенно другой подход для получения того же эффекта.

Спасибо!

8
задан Arieleo 30 July 2011 в 07:15
поделиться