锚点标签显示完整链接问题

Anchor tag display full link issue

本文关键字：链接 问题 显示 标签      更新时间：2023-09-26

我发现了一些非常棒的链接检测正则表达式，它的工作效果令人难以置信。它只获取链接的主要部分，并将其显示为锚点标记的主体，将整个链接显示为href。在示例中，http://somesite.com/index.php?some=var将简单地看起来像somesite.com。这纯粹是令人敬畏的，但话说回来，它也有缺点，因为有人可能会传递一些变量，而你可能出于某种原因不一定想发送这些变量，我想我需要在锚主体中显示整个url。遗憾的是，我不想放弃漂亮的主播，我决定在某个活动中显示完整的链接，因此遇到了麻烦。

首先，我想我应该使用鼠标悬停（jquery的mouseenter）来显示完整的链接，然后使用mouseleave使其再次美观。不幸的是，由于一行末尾有一堆参数，站点名称很短，所以没有成功。示例：如果在一行的末尾有一个锚，其正文为site.com，href为http://site.com/some/params，则在展开后，它将转到下一行，这将触发鼠标离开，从而压缩它，这将自动将链接返回到原始行，并触发展开函数，创建一个无限循环。

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

我好像没什么主意了，有人有吗？

在不破坏布局的情况下，您可以使用本机title属性来显示完整的URL，或者使用插件（如jQuery UI的工具提示小部件）来进行更自定义的操作。

<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());
});

演示

不过，这主要是一次CSS破解，链接文本可能会泄漏到容器之外（显然，如果容器有overflow:hidden，就不起作用），因此它不太适合布局。最好使用title或工具提示插件。

相关文章：