多行内联块成为一个块,破坏了我的漂亮报价效果

Question

我正在尝试创建一个块引号,它的两侧有很大的引号.块引用的文本内容是动态的,因此标记应根据其大小对齐.

我已经使用了一个内联块元素,因此它将缩小到适合并包含它的文本,并且我有90%,但我唯一的问题是内联块元素在它有多行时变成块元素.

为了说明为什么这是一个问题,我已经制作了jsfiddle片段:

如您所见,大多数块看起来都是正确的:

我无法控制内容的单词长度.有时会出现例4.

有谁知道如何解决这个问题？如果你有一个完全不同的方法来获得相同的效果,我也愿意丢弃所有这些代码.

谢谢!

Answer 1

如果您愿意使用一些脚本，您可以执行以下操作：

将你的文本放在一个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');
});