Html 如何使多行链接之间的间距可单击

我想连接一个三行长的句子。这看起来很简单，但我想不出一个优雅的方法来让两行之间的空间也可以点击。这是我的密码：

<style>
    a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        text-decoration: none;
        font-size: 20px;
        line-height:40px;
    }
</style>

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

a{
颜色：#000；
边框底部：1px实心#000；
垫底：5px；
文字装饰：无；
字体大小：20px；
线高：40px；
}

Fiddle:

包装

不能将div（块）放在span（内联）元素中。

将锚点转换为显示：内联块，然后使用额外的跨度恢复文本中的下划线

html:

---

演示：

您也可以使用伪元素来实现这一点。因此，HTML没有改变：

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

演示：

---

根据您的

a块

大小，您必须稍微调整高度…

您可以在

a

元素中添加垂直填充，以增加其覆盖的可单击区域，而不会影响布局或使周围的文本可单击

您需要的填充量是行高和字体大小之间的差值。在您的情况下，行高是

40px

，字体大小是

20px

，因此您需要

20px

垂直填充来覆盖间隙。您已经有了

5px

作为底部填充加上

1px

边框，因此需要添加顶部填充的

14px

（因为您无法增加底部填充而不使边框看起来更低）

---

Fiddle:

实际上，我刚刚意识到整个区块的宽度是一个链接。如果不明显的话，那也没关系，但我的副本有一个更准确的表示：有没有办法只链接文本？

a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    display: inline-block;
}
.underline {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

   a {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    position:relative;

}
a:before {

    content:"";
    position:absolute;
    cursor:pointer;
    left:0px;
    top:0px;
    width:100%;
    height:400%;
    /*background-color:#666;*/

}