Wie kann man einen Button mit Zeilenumbrüchen erstellen

Die Schaltflächen werden in der Regel mithilfe von Tags <button> oder <input> erstellt.

Beim Erstellen von Schaltflächen kann es erforderlich sein, dass Sie einen Zeilenumbruch haben, wenn Ihre Schaltfläche einen Langtext enthält.

Der einfachste Weg, einen Zeilenumbruch zu haben, ist die Verwendung des Tags <br> in Ihrem Text. Es wird verwendet, um einen einzelnen Zeilenumbruch einzufügen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h1>Button mit einem Zeilenumbruch</h1>
    <button type="submit">Mein<br />Button</button>
  </body>
</html>

Eine weitere Möglichkeit, einen Zeilenumbruch zu machen, ist die Verwendung der CSS-Eigenschaft word-break, die angibt, wie Wörter brechen sollen, wenn sie das Ende einer Zeile erreichen. Platzieren Sie Ihren Button-Text in einem Element <p> und geben Sie ihm ein Styling. Verwenden Sie den Wert keep-all für die Eigenschaft word-break und stellen Sie width entsprechend Ihren Wortlängen ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p { 
      width: 50px;
      padding: 0 20px; 
      margin: 0;
      word-break: keep-all;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Button mit word-break</h1>
    <button type="submit">
      <p>Mein Buttons Beispiel</p>
    </button>
  </body>
</html>

Eine andere Methode für einen Zeilenumbruch ist die Verwendung der Eigenschaft flex-wrap mit dem Wert wrap, der definiert, dass die flexiblen Elemente dort, wo sie benötigt werden, umhüllt werden. Auch hier müssen Sie die Eigenschaft width für Ihren Button definieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .btn { 
      display: flex;
      flex-wrap: wrap;
      width: 80px;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Button mit flex-wrap</h1>
    <button class="btn" type="submit">Mein Buttons Beispiel</button>
  </body>
</html>

Ein weiteres Beispiel, wo zusätzliches Styling und Onclick-Attribut zu unserem Button hinzugefügt wird.

Erfahren Sie mehr über die Methode Wie kann man einen HTML-Button, der als ein Link funktioniert, erstellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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://de.w3docs.com';" type="submit">Klicken<br />Hier!</button>
  </body>
</html>