1

这可能很容易回答..我有一个 div，里面有一些文本，在那个文本中也可以有一些链接，例如你好http://google.com你好http://bing.com。

问题是如何使用 css 使这些链接显示为超链接。

谢谢

编辑：

我刚刚看到，在发布这个问题后，链接会自动显示为超链接。我需要同样的东西。

4

4 回答 4

5

这不是 CSS 可以解决 AFAIK 的要求。您需要使用 Javascript 之类的东西来处理 DIV 中的文本，以查找类似于 URL 的内容并在它们周围放置锚标记。对于您提交答案时发生的情况，我的猜测是 Stackoverflow 上的服务器端代码做了同样的事情，只是在服务器上没有在您的浏览器中实时呈现。

于 2012-08-07T04:37:51.987 回答
1

没有将 URL 转换为链接的纯 CSS 解决方案。

这是一个 PHP 代码片段的示例，它正是这样做的： http: //css-tricks.com/snippets/php/find-urls-in-text-make-links/

这个 SO 答案有一个使用 Javascript 的解决方案，可以说更优雅：

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

https://stackoverflow.com/a/37687/1512956

于 2012-08-07T04:41:29.480 回答
1

试试这个

<style type="css/text">
A:link {text-decoration: none}
A:hover {text-decoration: underline;}
</style>
<body>
<div id="link">
   <A href="http://www.google.com">Google</A>
   <A href="http://www.yahoo.com">yahoo</A>
</div>

演示http://jsfiddle.net/rSpMV/1/

于 2012-08-07T04:42:12.343 回答
1

你需要使用类似的东西javascript来解决这个问题。

像这样：

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

请检查：stackoverflow 问题

于 2012-08-07T04:45:52.317 回答