CSS - 改行線のリンクボックス

Question

リンクテキストと改行を含むボックスを作成しようとしています。

しかし、ラインがブレイクされたときに、いくつかの理由で、ボックスはあまりにも壊れ..です

私は多くのオプションを試してみたが、私は解決策を見つけることができません。ここ

はhttps://jsfiddle.net/cbdnvm2t/

<br><br> 
<a href="#" style="padding: 10px; border: 1pt solid #ea1d2a;">Line 1 <br> Line 2</a> 

<br><br><br><br> 
<a href="#" style="padding: 10px; border: 1pt solid #ea1d2a;"><span style="display:block">Line 1</span> <br><span style="display:block"> Line 2</span></a> 

Answer 1

は、あなたのaタグにdisplay:blockを追加してみてくださいです。デフォルトのアンカーによって

はインライン要素、ないブロックな要素である - これはあなたのボックスには2行に分割することが原因になっているものです。

以下が動作するはず：期待される結果に近づけることができるインラインblock`：

<a href="#" style="display: block; padding: 10px; border: 1pt solid #ea1d2a;">Line 1 <br> Line 2</a>