多行HTML支持程序中的非可点击区域

是否可以防止多行html定位标记中行之间的非可点击区域？在这个例子中，我使用行高1.5，并且不能在行之间单击。多行HTML支持程序中的非可点击区域

我知道在html5中，我们可以把块级标签固定在<a><div>Link</div></a>这样的锚上，但问题是这部分内容可以由用户编辑，我不能要求他们编写像这样的锚链接。是否有可能只用css解决这个问题？

CSS：

a { 
    line-height:1.5em; 
}

HTML：

<a href="#">This is a <br> multiline anchor</a> 
<br><br><br> 
<a href="#">This is a very long anchor displayed as a multiline anchor without BR</a>

DEMO：

http://jsfiddle.net/ergec/F52uY/2/

2013-11-04 Ergec

的事情是，有合法的情况下，必须无法点击。例如如何处理这种案例http://jsfiddle.net/F52uY/5/？ –

@ GabyakaG.Petrioli这不是一个问题，因为这将被用于特定的CSS类只用于作为彩色按钮的锚点。 – Ergec

您可以将display: inline-block;或display: block设置为a，然后可以点击。

或者你可以增加padding，并在同一时间设定为负margin。这将缩小差距。

2013-11-04 14:12:57 Krzysztof

当文本处于正常句子流时，它将不起作用。例如在http://jsfiddle.net/F52uY/8/ –

所以，也许尝试填充/保证金窍门：http://jsfiddle.net/693z4/ – Krzysztof

无需保证金，只限制填充顶部/底部 –

如果你给你的锚标记一个display: block;你将有一个坚实的点击区域。

a { 
    line-height:1.5em; 
    display: block; 
}

与 display: block;

的一个问题是不具有指定的宽度，然后整个100％的宽度是可点击。

2013-11-04 14:13:25

逼近它不会影响您的文本的布局的其余部分搞乱（包括链接的周围文本）的唯一方法是一些顶部/底部垫衬添加到这些链接..

所以将padding:3px 0;添加到您的代码将解决问题。（这将需要调整，不过，相对于你的font-size和line-height）

2013-11-04 14:18:57

+1为段落中的文字提供更灵活的解决方案。 –

回答