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

发布时间：2020-12-14 16:37:37 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个块引号,它的两侧有很大的引号.块引用的文本内容是动态的,因此标记应根据其大小对齐. 我已经使用了一个内联块元素,因此它将缩小到适合并包含它的文本,我在那里90％,但我唯一的问题是内联块元素在有多行时变成块元素. 为了说明为什么这是一

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

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

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

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

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

>单线 – 没问题.结束标记附着于
遗言.
>多行 – blockquote完全可用
宽度.不过,问题并不大.
>与2相同,只是更短的单词.
>这是它变得棘手的地方.由于内联块元素
成为一个块元素 – 它占用了完整的可用宽度,并通过将结束标记放得很远来破坏效果.

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

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

谢谢！

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

把你的文字放在一个带有类的范围内,就像这样……

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

然后获取每个跨度的宽度并动态调整最大宽度

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!