8

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

我使用了一个 inline-block 元素，所以它会缩小以适应并包含它的文本，我在那里有 90%，但我唯一的问题是一个 inline-block 元素在它有多行时变成了一个块元素.

为了说明为什么这是一个问题，我制作了 jsfiddle 片段：

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

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

  1. 单行 - 没问题。结束标记附加到最后一个单词。
  2. 多行 - 块引用占用完整的可用宽度。不过，问题不大。
  3. 与 2 相同，只是较短的单词。
  4. 这是棘手的地方。由于 inline-block 元素变成了块元素 - 它占用了全部可用宽度并通过将结束标记放置得很远而破坏了效果。

我无法控制内容的字长。有时会出现示例 4。

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

谢谢！

4

2 回答 2

2

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

把你的文字放在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/

于 2011-08-03T17:29:25.553 回答
0

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

跨度元素将自动内联显示，因此您的结束引号应该自动出现在您的最后一个单词旁边。我将您的相对定位从您的块引用元素和引用元素中移除。这使得跨度比第一个/最后一个单词稍微高一点（因为太高了）所以我使用它们单独的相对定位将它们向下推，10px 用于开头，将它留在第一个单词上方，18px 用于结束引号将其挂在最后一个单词下方。当您在杂志上看到它们时，它们就是这样。

于 2011-07-30T07:39:38.073 回答