CSS - Break line链接框

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

尝试将display:block添加到您的a代码。

默认情况下，锚点是内嵌元素，而不是块元素 - 这就是导致你的盒子分成两行的原因。

以下内容应该有效：

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