Многострочный inline-блок становится блоком и разрушает мой эффект цитаты - PullRequest
Новая
       3

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

8 голосов
/ 30 июля 2011

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

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

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

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

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

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

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

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

Спасибо!

Ответы [ 2 ]

2 голосов
/ 03 августа 2011

Если вы хотите использовать немного сценариев, вы можете сделать следующее:

Поместите ваш текст в span с классом, например ... 

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

Затем получите width каждого span и динамически отрегулируйте max-width

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

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

0 голосов
/ 30 июля 2011

Сортировка: http://jsfiddle.net/kTQqC/14/

Элемент span будет автоматически отображаться в строке, поэтому ваша заключительная цитата должна автоматически находиться рядом с вашим последним словом. Я снял ваше относительное положение с вашего элемента blockquote и элемента quote. Это оставляло интервалы, сидящие чуть выше первого / последнего слова (как в слишком высоком), поэтому я оттолкнул их, используя относительное позиционирование на них по отдельности, 10px для открытия, оставив его чуть выше первого слова, и 18px для закрывающая цитата, оставляющая его висящим ниже последнего слова. Вот как это происходит, когда вы видите их в журналах.

...