Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 dialogue, once activated. Buttons are typically created using the HTML <button>, <input> or <a> tags.
Syntax
<button type = "button">
Apart from the ‘type’ attribute, the button tag uses other attributes such as autofocus, disabled, form, formaction, formmethod, value etc.
When a button contains a long text it becomes necessary to add line breaks while creating it. There are a couple of ways of achieving this as discussed below.
Using the <br> tag
The HTML <br> tag is used to insert a single line break in any text. It is an empty tag and hence there is no closing tag to it.
Example
The following example shows the simplest way of creating a button with line breaks using the <br> tag.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
button{
width:75px;
background-color:blueviolet;
border:4px solid lightblue;
color:white;
}
</style>
</head>
<body>
<h3>Button with line breaks</h3>
<button type="button">My<br>First<br>Button</button>
</body>
</html>
Using the word-break Property
Another method for inserting a line break is to use the CSS word-break property, which specifies how words should be broken when they reach the end of a line.
Syntax
word-break: normal|break-all|keep-all|break-word;
Normal: It is the default value. It follows the regular line break rules.
Break-all: It specifies that a word may be broken at any particular character to prevent overflow.
Keep-all: It specifies that a word-break should not be used for Chinese, Japanese and Korean text.
Break-word: It specifies that a word may be broken at arbitrary points to prevent any overflow.
Example
In this example we insert the button text in a <span> element and Use the "keep-all" value of the word-break property and set the width.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
span {
display: block;
width: 20px;
padding:10px 20px;
word-break: keep-all;
text-align: center;
}
</style>
</head>
<body>
<h3>The word-break property</h3>
<button type="button">
<span>This is a button</span>
</button>
</body>
</html>
Example
This example shows how we can insert line breaks in a button created using the <input> tag. We set the white-space property to normal and use the break-word value of the word-break property.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
input{
display: inline-block;
white-space: normal;
word-wrap: break-word;
width: 110px;
padding: 20px 15px 25px 10px;
margin: 10px;
background-color: darkgrey;
color: white;
border: 4px solid darkslategray;
border-radius: 15px;
text-align: center;
font-size: 20px;
font-family:"CAMBRIA";
}
</style>
</head>
<body>
<h3>The word-break property</h3>
<input type="button" value="Input Button" />
</body>
</html>
Using the flex-wrap Property
A different method for inserting a line break is to use the flex-wrap property and its "wrap" value, which specifies that the flexible items will wrap where necessary. It is required to specify the width of the button in this case.
Syntax
Following is the syntax
flex-wrap: nowrap|wrap|wrap-reverse;
Nowrap: This is the default value. It specifies that the flexible items will not be wrapped.
Wrap: It specifies that if necessary, the flexible items will be wrapped.
Wrap-reverse: It specifies that the flexible items will be wrapped in reverse order if necessary.
Example
The example below demonstrates the use of flex-wrap property to insert line breaks in the button. We use the wrap value of the flex-wrap property and set the display property to flex.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
button {
display: flex;
flex-wrap: wrap;
width: 75px;
padding:12px;
background-color:cadetblue;
font-weight:550;
}
</style>
</head>
<body>
<h3>The flex-wrap property</h3>
<button type="button">A Demo Button</button>
</body>
</html>
Example
This example shows how we can add line breaks in a button created using the <a> tag. It is very similar to the above example as we use the wrap value of the flex-wrap property here.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
.button {
display: flex;
flex-wrap: wrap;
cursor: pointer;
width: 60px;
padding: 10px 20px 20px 15px;
border-radius: 15px;
text-decoration-color: pink;
background-color: palevioletred;
color:lavenderblush;
text-align: center;
}
</style>
</head>
<body>
<h3>The flex-wrap property</h3>
<a class="button" href="https://www.tutorialspoint.com/index.htm">Welcome to Tutorials Point</a>
</body>
</html>
743 Views
