Question

我发现了一些非常棒的链接检测正则表达式，效果令人难以置信。它只占链接的主要部分，并将其显示为锚标记的主体，将整个链接显示为href。例如，http://somesite.com/index.php?some=var看起来就像somesite.com。这只是纯粹的真棒，但它又有它的缺点，因为有人可能会传递一些你可能不一定想要发送的变量，我想我需要在锚体中显示整个url。可悲的是，我不想只是放弃美丽的锚点，我决定在某些事件上显示完整的链接，因此遇到了麻烦。

首先我认为我应该去鼠标悬停（jquery的mouseenter）来显示完整的链接，然后使用mouseleave让它再次美丽。不幸的是，由于在一行参数的末尾有短站点名称，这是不成功的。示例：如果在行的末尾有一个主体site.com和href http://site.com/some/params的锚点，则在展开后它将转到下一行，这将触发鼠标离开并因此压缩它，这将通过它自动返回到原始行的链接并触发扩展函数创建无限循环。

第二个想法是右键单击展开链接。显然，必须禁用要扩展的链接上下文菜单。不幸的是，再次，在一行的末尾使用相同的链接会导致显示上下文菜单，因为在扩展后，右键单击也会在短链接所在的空白处触发。

我似乎没有想法，有人有吗？

Answer 1

在不破坏布局的情况下，您可以使用本机title属性来显示完整的URL，或者对于更可自定义的内容，可以使用jQuery UI的tooltip widget等插件。

<a href="http://www.shorturl.com/?param=notSoShortUrl"
  title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>

如果在初始标记中输出title属性，则即使禁用JS，此解决方案也能正常工作。如果您愿意，jQuery UI工具提示可能有助于为支持JS的用户定制它。

如果有人对如何修补OP中描述的换行问题感兴趣，这是我的原始解决方案，以实现非突破性的可扩展链接：

<a href="http://www.aaaaaaaaaaaaaaaaaa.com/?params=somelongstring">aaaaaaaaaaaaaaaaaa.com</a>

$('a').hover(function(e) {
    $(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
    $(this).css({
        width: this.offsetWidth,
        whiteSpace: 'nowrap',
        display: 'inline-block'
    }).data('shorturl', $(this).text());
});

Demo

虽然，这主要是一个CSS hack和链接文本可能泄漏到容器外（显然，如果容器有overflow:hidden将无法工作），所以它不是很好的布局目的。最好坚持使用title或工具提示插件。

锚标记显示完整链接问题

1 个答案: