Search code examples
htmlcssline-breaks

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>
Solution

  • 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>