Non-clickable areas in multi-line HTMLanchors

Question

Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.

I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?

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/

Answer 1

You can set display: inline-block; or display: block to a, and then it will be clickable.

Example: http://jsfiddle.net/RMXfc/

Or you can increase padding and set negative margin at the same time. This will reduce gap.

Example: http://jsfiddle.net/693z4/