DANIEL DANIEL - 3 months ago 18
CSS Question

CSS - Break line link box

I'm trying to create a box with a linked text and a break line.

but, for some reason, when the line is break, the box is break too..

I try a lot of options but I cannot find the solution.

here is the 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

Try adding the display:block to your a tag.

By default anchors are inline elements, not block elements - this is what is causing your box to split over two lines.

The following should work:

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

Comments