CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break.

However, the issue arises when the line breaks, causing the box to also break.

After trying multiple options, I still can't seem to find a solution.

Check out my attempt here

<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>
htmlcssline-breaks

Answer №1

To solve the issue, consider including the display:block property in your a tag.

By default, anchors are considered as inline elements rather than block elements which is causing your content to split over multiple lines.

Here is a possible solution:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

javascriptphpjqueryhtml

Having trouble with images not displaying in IE10 on HTML5 canvas?

I recently delved into learning about html5 and the canvas element, attempting to create a basic webpage that rotates an image clockwise and counterclockwise upon button clicks. Although I managed to get it working, when I tested it on ie10, only the blank ...

htmlinternet-explorercanvasinternet-explorer-10

What is the best way to create a layout containing a <div> split into three columns, with the middle column having rows?

I'm currently working on a <div> layout that I need to split into rows. The challenge is creating a design that is fluid and can adapt to various screen sizes, including mobile devices. While using an HTML table might be a quick fix, it's n ...

htmlcsstwitter-bootstrap

PHP not displaying radio button values

My latest project involved creating a quiz program using only PHP. The program consists of 4 different questions and radio buttons, and when an option is selected, the value of the radio button (A, B, C, or D) should be printed. I have set up 4 PHP varia ...

phphtmlphp-7.3

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...

htmlcsstwitter-bootstrap-3

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

javahtmlcssseleniumselenium-webdriver

Click to make the arrow come to life through animation!

I am brand new to coding and this is my inaugural code snippet: .container_menu { position: relative; top: 0px; left: 0px; width: 25px; height: 25px; } .container_menu .line-1 { background-color: black; width: 59%; height: 2px; positio ...

cssanimation

Ways to conceal a div using ng-hide

Is there a way to make a div disappear using ng-hide? I have this code and I'm trying to hide the div with id="ApagarNA". The code displays a table with values, but some rows contain N.A in all 4 columns, and I want to hide those specific rows. For e ...

htmlangularjs

In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions? input[type="submit"] { font-family: made, mirage; text-decoration: none; backg ...

htmlcss

How to effectively eliminate the border of a single cell within a Bootstrap Table

Is there a way to remove the border of a single cell in a bootstrap table without affecting the others? I attempted using an id on that specific cell and adding the following CSS code: #borderless-cell { border: 0; } Unfortunately, this solution doesn&ap ...

htmlcssangulartwitter-bootstrapangular-ui-bootstrap

Is there a way to display the HTML input date by simply clicking on text or an image?

I need to display a date picker when I click on specific text or an image. I am working with reactjs and utilizing the HTML input type="date", rather than the React-datepicker library. Here is the code snippet: import { useRef } from "r ...

javascripthtmlreactjs

Retrieving the value of a <select> element using React.useState in a Nextjs environment

Encountering an issue in Nextjs involving the useState function from React. There is a select element with multiple options. Upon selection, the useState should store the value of the selected option. const [value, setValue] = useState('') ... ...

javascripthtmlreactjsnext.js

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

javascripthtmlbuttonevent-listener

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript

Selenium RC: Utilizing the CSS :contains pseudo-class for Element Selection

I have a task to verify that the data in a table row matches my expectations for two different tables. Let's look at an example using HTML: <table> <tr> <th>Table 1</th> </tr> <tr> <t ...

cssseleniumphpunitselenium-rc

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

Markdown in Vue.js filters

I found a helpful example by Evan You on how to convert HTML to markdown - check it out here. However, when trying to install the marked package via npm and implementing it, I encountered an error stating that 'marked' is not defined. After inc ...

htmlvue.jsmarkdownjavascript-marked

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Display or conceal specific fields depending on the selection from a dropdown menu

I'm currently experimenting with using JavaScript and/or jQuery to dynamically hide specific HTML elements based on the selection in a drop down menu. Here is what my page setup looks like: [Drop down menu] [text field 1] [text field 2] [text field ...

javascripthtml