Am besten eignet sich ein <button>, damit Sie einen <br> darin verwenden können, wie z. B.
<button>
Some
<br>
Text
</button>Wenn Sie ein <input> benötigen und der Text daher in einem value stehen muss, war es früher einigermaßen zuverlässig, 
 (einen Wagenrücklauf) zu verwenden, um eine Zeile in einem Wert wie diesem umzubrechen
<input type="button" value="Really
Tall
Button">Das funktioniert in Firefox immer noch, scheint aber in Chrome nicht mehr zu funktionieren und ist in Safari gefährlich, wo der Text nach der ersten Entität abgeschnitten wird.
Siehe den Pen Line Breaks in Buttons von Chris Coyier (@chriscoyier) auf CodePen.
Im letzten Opera (11.51) funktioniert es nicht.
funktioniert das in Internet Explorer?????
<input type=”submit” value= topValue bottomValue” onclick=”this.style.visibility=’hidden'” class=”button” />
funktioniert nicht für Zeilenumbruch oder Wagenrücklauf in Internet Explorer 11
<input type=”submit” value= topValue 
 bottomValue” onclick=”this.style.visibility=’hidden’” class=”button” />
funktioniert nicht für Zeilenumbruch oder Wagenrücklauf in Internet Explorer 11
Wie gebe ich den Buttons eine feste Breite? Sagen wir 150px?
funktioniert auch auf dem iPad nicht.
funktioniert nicht im Dolphin Mini Browser auf Android
<button>Zeile1<br/>Zeile2<br/>Zeile3</button>
bessere Lösung.
Ich denke, johndoe’s Lösung ist besser..
Es funktioniert gut, wenn Sie einen
<button>benötigen, aber wenn Sie ein richtiges Button-Input-Feld möchten, ist dies ein schlechter semantischer Ersatz.Der Code sollte auch gut funktionieren
zwischen öffnenden und schließenden Tags –
(input type=”submit” value=”Wirklich
Großer
Button” / )
Schreiben Sie „Großer“ und „Button“ ab der nächsten Zeile. Leerzeichen werden auch in „ “ gezählt.
Getestet und fehlgeschlagen.
Ich habe CSS Techniques „white-space: normal;“ bevorzugt, und es funktioniert gut.
Das funktioniert gut, Sie sind FANTASTISCH :)
Danke Joel !! CSS ist oft die beste Lösung :)
Danke Joel, das funktioniert………………….
Das stimmt, danke Joel!
Das funktioniert perfekt!
Sie legen einfach die gewünschte Breite fest und „white-space:normal;“ macht seine Arbeit;
Daumen hoch Joel Norman!
Das ist die einzige Lösung, die für mich wirklich funktioniert. Danke!!
Nizza Code. :)
Ich hoffe, dieser funktioniert auch
<button style="white-space: normal">Das ist eine wirklich wirklich lange Codezeile</button>Er wird den Text in mehrere Zeilen aufteilen
Ja, dieser funktioniert sicher.
wie würde man hier einen Zeilenumbruch machen?
dieser hier funktioniert, tx
Danke Joel! Funktioniert wie ein Zauber.
uxfindings.blogspot.com: Ich denke, es gibt Positives und Negatives. Hier sind meine beiden Gedanken zum Thema.
Aus UX-Sicht
Ich möchte Ihnen sagen, dass dies zwar eine Funktionalität ist, die erreicht werden kann, aber es besteht auch die Möglichkeit, dass dies nicht die beste Benutzererfahrung ist. Der Grund dafür ist, dass die Button-Texte für den Benutzer möglicherweise schwer zu erfassen sind.
Aus Entwicklersicht
Wenn Sie eine Konstante oder Variable verwenden, die einen menschenlesbaren Namen hat, wie diesen…
var carriageReturn = "{code]";Dann sollte es recht brauchbar sein.
Verwenden Sie den Stil „white-space: normal;“ und setzen Sie auch eine Breite für den Button. Dies wird die Zeile umbrechen.
Ich bevorzuge in diesem Fall CSS :)
Ja, nach einigen Tests ist CSS die beste Lösung, um einen Umbruch in einem Button zu erzielen. Das gilt, wenn Sie möchten, dass der Button automatisch und nicht an bestimmten Wörtern umgebrochen wird.
Wenn Sie möchten, dass ein Button an bestimmten Wörtern umgebrochen wird, können Sie die Breite des Buttons mit CSS ändern oder einen grafischen Button erstellen, der verwendet werden kann.
Wenn es um CSS geht... gibt es nichts, was Sie nicht tun können.
Danke Joel
Wie wäre es mit responsiven Buttons über Media Queries? So können Sie genau festlegen, wann umgebrochen werden soll.
Dann fügen Sie einfach diese Klasse hinzu.only-mobile {
display: none;
@include media($break-md) {
display: block;
}
}
@include media ist ein Bourbon-Mixin (verhält sich wie eine Media-Query)
Das ist eine wirklich wirklich lange Codezeile
dieser Code funktioniert nicht………….
„white-space: normal;“ zeigt nur das erste Wort in IOS9 an
Es funktioniert gut in Firefox, Safari und Chrome, aber nicht in iOS9
Schlechter Artikel, funktioniert nicht. Bitte entfernen Sie diesen Beitrag
Ja, aber was ist mit einem <input type="submit" value="Wie man Text hier umbricht, ist die Frage” /> … sagen wir an einer bestimmten Stelle nach dem Wort „Text“, ohne dass das HTML-br-Tag angezeigt wird?
versuchen Sie es auch damit: word-wrap: break-word;
versuchen Sie es, es funktioniert für mich.
white-space: normal;