Appearance
How to Create Button with Line Breaks
Buttons are generally created with the help of the HTML <button>, <input>, or <a> tags.
While creating buttons, you may need to add a line break when your button contains a long text.
The ways of adding a line break
The easiest way to have a line break is using the <br> tag on your text. It is used for inserting a single line break.
Example of creating a button with a line break by using the <br> tag:
An example of how to create button with line break using HTML <br> tag
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Button with line break</h1>
<button type="submit">My<br />Button</button>
</body>
</html>Result
<button type="submit">My Button
</button>Another way of adding a line break is using the CSS overflow-wrap property, which specifies how words should break when reaching the end of a line. Put your button text in a <span> element and give styling to it. Use the "break-word" value of the overflow-wrap property and set the width.
Example of creating a button with a line break by using the overflow-wrap property:
An example of how to create button with line break using CSS overflow-wrap property
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: block;
width: 50px;
padding: 0 20px;
margin: 0;
overflow-wrap: break-word;
text-align: center;
}
</style>
</head>
<body>
<h1>Button with overflow-wrap</h1>
<button type="submit">
<span>My Button Example</span>
</button>
</body>
</html>A different way of adding a line break is using the flex-wrap property with its "wrap" value, which defines that the flexible items will wrap where needed. Here also you need to set the width property for your button.
Example of creating a button with a line break by using the flex-wrap property:
An example of how to create button with line break using CSS flex-wrap property
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: flex;
flex-wrap: wrap;
width: 80px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Button with flex-wrap</h1>
<button class="btn" type="submit">My Button Example</button>
</body>
</html>Let’s see another example, where we use additional styling and onclick attribute for our button.
Example of creating a styled button with a line break:
An example where additional styling and onclick attribute is added to our button
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: inline-block;
padding: 10px 25px;
margin: 4px 2px;
background-color: #1c87c9;
border: 3px solid #095484;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 20px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="window.location.href='https://www.w3docs.com';" type="submit">
Click <br />Me!
</button>
</body>
</html>As we have mentioned, it is also possible to create buttons with the <a> and <input> elements. Let's see how we can add line breaks within buttons created with these elements.
Example of adding a line break within a button created with the HTML <a> tag:
Example with the HTML <a> tag:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: flex;
flex-wrap: wrap;
cursor: pointer;
width: 50px;
padding: 10px;
text-decoration: none;
background-color: lightblue;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Button with the <a> tag </h1>
<a class="btn" href="https://www.w3docs.com/learn-git.html">Learn<br>Git</a>
</body>
</html>Note: The <input> element is a replaced element. Standard browsers do not support CSS text wrapping properties like white-space or word-wrap on the displayed value. For buttons that require wrapped text, it is recommended to use <button> or <a> elements instead. Below is an example of styling an <input> button, but note that the text will not wrap automatically.
Example of adding a line break within a button created with the HTML <input> tag:
Example with the HTML <input> tag:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: inline-block;
width: 110px;
padding: 15px 25px;
margin: 10px;
background-color: lightblue;
border: 2px solid #56a9de;
border-radius: 5px;
text-align: center;
outline: none;
font-size: 18px;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" class="btn" value="Some text" />
</body>
</html>