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>

Updated on: 11-Sep-2023

704 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements