如何下划线文本只有在2行超链接与缩进 [英] How to underline text only on 2 line hyperlink with indent

问题描述

我创建了一个侧边栏菜单，其中有几个链接，其中许多需要跨越2行基于标题长度和面板的宽度要求。设计包括一个>>作为文本项目符号，所以第二行缩进。我需要使超链接在悬停下划线，但只有文本部分，而不是>>或第二行上的空格。我已经尝试了几十种在网上找到的解决方案，这是我最近得到的：

I am creating a sidebar menu that has several links, many of them that need to span 2 lines based on the title length and the width requirement of the panel. The design includes a ">>" as a text bullet so the 2nd line is indented. I need to make the hyperlink underline on hover, but only the text portion, not the >> or the spaces on the 2nd line. I've tried dozens of solutions I've found online and this is the closest I've gotten:

http://jsfiddle.net/FbDGL/

这是HTML：

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
<a href="neuropsychological-assessment.htm">
<font color="#00457C">Neuropsychological Assessment</font></a></b><br>
</font>
<font color="#00457C" face="Lucida Sans Unicode" size="2">
» <a href="adhd.htm">Attention Deficit Hyperactivity<br>
<span class="space">&nbsp;&nbsp; </span>Disorder</a><br>

这里是CSS：

a:link {text-decoration: none;
color:#00457C;
}
a:visited {text-decoration: none;
color:#00457C;
}
a:hover {text-decoration: underline}
a:hover .space {text-decoration: none}
a:active {text-decoration: none}

它可以在IE中使用，但不能在Chrome，Firefox或Safari中使用。第二行的空格仍然显示悬停在这些浏览器中的下划线。任何人都可以向我提供可以在所有浏览器中使用的代码来完成此操作。

It works in IE but does not work in Chrome, Firefox or Safari. The spaces on the 2nd line are still showing the underline on hover in those browsers. Can anyone provide me with code that will work in all browsers to accomplish this?

推荐答案

如果不需要换行符要手动添加，可以设置悬挂缩进。

If you don't need the line breaks to be manually added, you can set a hanging indent. That will not be underlined with the link.

更改您的html，如下所示：

Change your html as follows:

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
        <a href="neuropsychological-assessment.htm">
        <font color="#00457C">Neuropsychological Assessment</font></a></b><br>
        </font>
    <div class='div_for_length'>
        <font color="#00457C" face="Lucida Sans Unicode" size="2">
            <div class='link'>»
            <a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a></div>
            </div>

在您的CSS规则中添加以下内容：

And in your CSS rules add these:

.div_for_length {
    width: 250px; /* or whatever your needs are */
}

.link {
    display: block;
    float: left;
    text-indent: -1em;
    padding-left: 1em;
}

注意，如果你使用CSS， code>< font> 标记。这些应该在CSS规则中表示。

As a side note, if you're using CSS, you should avoid <font> tags. These should be expressed in CSS rules.

这篇关于如何下划线文本只有在2行超链接与缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！