Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Button with Line Breaks?
The HTML <button> element is an interactive element that a user can activate with a mouse click or keyboard shortcut. It performs a programmable action, such as submitting a form or opening a dialog, once activated. When a button contains long text, it becomes necessary to add line breaks to improve readability and fit the button within specific dimensions.
Buttons can be created using the HTML <button>, <input>, or <a> tags. There are several CSS techniques to create line breaks within button text without compromising functionality or accessibility.
Syntax
Following is the basic syntax for creating a button
<button type="button">Button Text</button>
The button tag accepts various attributes such as type, autofocus, disabled, form, formaction, formmethod, and value.
Using the <br> Tag
The HTML <br> tag is the most straightforward method to insert line breaks in button text. It is an empty, self-closing tag that creates an immediate line break wherever it is placed.
Example
Following example demonstrates creating a button with line breaks using the <br> tag
<!DOCTYPE html>
<html>
<head>
<title>Button with Line Breaks using BR Tag</title>
<style>
button {
width: 120px;
height: 80px;
background-color: blueviolet;
border: 2px solid lightblue;
color: white;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Button with Line Breaks</h3>
<button type="button">My<br>First<br>Button</button>
</body>
</html>
The output displays a button with text split across three lines
??????????????? ? My ? ? First ? ? Button ? ??????????????? (Purple button with white text)
Using the word-break Property
The CSS word-break property controls how words should be broken when they reach the end of a line. This method is useful for creating automatic line breaks based on the button's width constraints.
Syntax
word-break: normal | break-all | keep-all | break-word;
The word-break property values
normal Default value that follows regular line break rules.
break-all Allows word breaks at any character to prevent overflow.
keep-all Prevents word breaks for CJK (Chinese, Japanese, Korean) text.
break-word Breaks words at arbitrary points to prevent overflow.
Example Using word-break with Span Element
Following example wraps button text in a <span> element and uses the word-break property
<!DOCTYPE html>
<html>
<head>
<title>Button with word-break Property</title>
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
span {
display: block;
width: 60px;
padding: 15px 20px;
word-break: break-word;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Word-break Property Example</h3>
<button type="button">
<span>This is a long button text</span>
</button>
</body>
</html>
The text automatically wraps within the specified width constraints, creating natural line breaks.
Example Input Button with word-break
Following example shows line breaks in a button created using the <input> tag
<!DOCTYPE html>
<html>
<head>
<title>Input Button with Line Breaks</title>
<style>
input[type="button"] {
display: inline-block;
white-space: normal;
word-wrap: break-word;
width: 120px;
height: 80px;
padding: 10px;
background-color: #607D8B;
color: white;
border: 2px solid #455A64;
border-radius: 8px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Input Button with Line Breaks</h3>
<input type="button" value="Long Input Button Text" />
</body>
</html>
The white-space: normal and word-wrap: break-word properties allow the input button text to wrap naturally within the defined width.
Using the flex-wrap Property
The flex-wrap property with flexbox layout provides another method for creating line breaks in buttons. This approach treats button text as flexible items that can wrap to new lines.
Syntax
flex-wrap: nowrap | wrap | wrap-reverse;
The flex-wrap property values
nowrap Default value that prevents flexible items from wrapping.
wrap Allows flexible items to wrap to new lines when necessary.
wrap-reverse Wraps flexible items in reverse order when necessary.
Example Button with flex-wrap
Following example uses the flex-wrap property to create line breaks
<!DOCTYPE html>
<html>
<head>
<title>Button with flex-wrap Property</title>
<style>
button {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100px;
height: 80px;
padding: 10px;
background-color: #FF9800;
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Flex-wrap Property Example</h3>
<button type="button">A Demo Button Text</button>
</body>
</html>
The text wraps automatically when it exceeds the button's width, creating natural line breaks.
Example Anchor Tag as Button with flex-wrap
Following example creates a button-like anchor tag with line breaks using flex-wrap
<!DOCTYPE html>
<html>
<head>
<title>Anchor Button with Line Breaks</title>
<style>
.button {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
cursor: pointer;
width: 80px;
height: 70px;
padding: 10px;
border-radius: 8px;
text-decoration: none;
background-color: #E91E63;
color: white;
text-align: center;
font-size: 13px;
font-weight: bold;
}
.button:hover {
background-color: #C2185B;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Anchor Tag Button with Line Breaks</h3>
<a class="button" href="https://www.tutorialspoint.com/">Welcome to Tutorials Point</a>
</body>
</html>
The anchor tag styled as a button automatically wraps the long text across multiple lines within the defined dimensions.
Method Comparison
Following table compares the different approaches for creating buttons with line breaks
| Method | Browser Support | Responsiveness | Use Case |
|---|---|---|---|
| <br> Tag | Universal |
4K+ Views
