1

これは簡単に答えられるかもしれません..私はdivを持っており、その中にいくつかのテキストがあり、そのテキストにはいくつかのリンクもあります.hello http://google.com hello http://bing.comなど.

問題は、css を使用してこれらのリンクをハイパーリンクとして表示するにはどうすればよいかということです。

ありがとう

編集：

この質問を投稿した後、リンクが自動的にハイパーリンクとして表示されることがわかりました。同じことが必要です。

4

4 に答える 4

5

これは、CSS が AFAIK を解決できるという要件ではありません。DIV 内のテキストを処理して URL のようなものを見つけ、それらの周りにアンカー タグを配置するには、Javascript などを使用する必要があります。あなたが回答を提出したときに何が起こったのかというと、私の推測では、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 に答える