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

Question

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

我使用了一个内联块元素，因此它会缩小到适合并包含它的文本，而且我有90％，但我唯一的问题是一个内联块元素变成了一个块元素有多行时。

为了说明为什么这是一个问题，我已经制作了jsfiddle代码段：

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

如您所见，大多数模块看起来都是正确的：

1. 单线 - 没问题。结束标记附着于 最后一句话。
2. 多行 - blockquote完全可用 宽度。不过，问题不大。
3. 与2相同，只是更短的单词。
4. 这里变得棘手。由于内联块元素 成为一个块元素 - 它占用了完整的可用宽度，并通过将结束标记放得很远来破坏效果。

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

有谁知道如何解决这个问题？ 如果您采用完全不同的方法来获得相同的效果，我也愿意抛弃所有这些代码。

谢谢！

Answer 1

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

将您的文字放在span的课程中，如此......

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

然后获取每个width的{​​{1}}并动态调整span

max-width

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

Answer 2

排序： http://jsfiddle.net/kTQqC/14/

span元素将自动以内联方式显示，因此您的结束引号应该自动在您的最后一个单词旁边。我从你的blockquote元素中取出你的相对位置，并引用元素。这使得跨度距离第一个/最后一个单词略微向上（因为太高）所以我将它们分别按相对定位推下来，10px用于开口，将其放在第一个单词的上方，18px用于收尾报价让它悬在最后一个字下方。当你在杂志上看到它们时，这就是这些。