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:

<!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

Another way of adding a line break is using the CSS word-break 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 "keep-all" value of the word-break property and set the width.

Example of creating a button with a line break by using the word-break property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: block;
        width: 50px;
        padding: 0 20px;
        margin: 0;
        word-break: keep-all;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Button with word-break</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:

<!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:

<!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 HTM <a> tag:

<!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 &lt;a&gt; tag </h1>
    <a class="btn" href="https://www.w3docs.com/learn-git.html">Learn Git</a>
  </body>
</html>

In the following example, we use the white-space property with the "normal" value and set the word-wrap property to "break-word".

Example of adding a line break within a button created with the HTM <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .btn {
        display: inline-block;
        width: 110px;
        white-space: normal;
        word-wrap: break-word;
        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>