Wie wird der Text der HTML-Schaltfläche mit fester Breite umbrochen?

197

Mir ist gerade aufgefallen, dass der Text in der Schaltfläche niemals umbrochen wird, wenn Sie einer HTML-Schaltfläche eine feste Breite geben. Ich habe es mit Zeilenumbruch versucht, aber das schneidet das Wort, obwohl es Leerzeichen zum Umbrechen gibt.

Wie kann ich den Text einer HTML-Schaltfläche mit einem Zeilenumbruch mit fester Breite wie jede Tabellenzelle erstellen?

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

Die CSS-Klassen fügen lediglich Rahmen hinzu und ändern die Auffüllung. Wenn ich word-wrap:break-wordzu dieser Schaltfläche hinzufüge , wird sie wie folgt umbrochen:

Roos Sturingen / Sen
sors

Und ich möchte nicht, dass es mitten in einem Wort abgeschnitten wird, wenn es möglich ist, es zwischen Wörtern abzuschneiden.

Peter
quelle

Antworten:

547

Ich habe festgestellt, dass Sie die CSS-Eigenschaft für Leerzeichen verwenden können:

white-space: normal;

Und es wird die Wörter als normaler Text brechen.

Siu
quelle
@ MGOwen es ist jetzt in Ordnung - wir haben IE6 in der Zwischenzeit deaktiviert.
low_rents
1
Die anderen Antworten, die darauf hindeuteten, word-wrap: break-word;funktionierten bei mir nicht, aber das tat es.
F1Krazy
15
white-space: normal;
word-wrap: break-word;

Meins funktioniert mit beiden

Richard
quelle
8

Sie können dies erzwingen (sofern der Browser dies zulässt), indem Sie Zeilenumbrüche in die HTML-Quelle einfügen:

<INPUT value="Line 1
Line 2">

Natürlich ist es nicht unbedingt trivial, herauszufinden, wo die Zeilenumbrüche platziert werden sollen ...

Wenn Sie <BUTTON>anstelle von HTML einen HTML- Code verwenden können <INPUT>, bei dem die Schaltflächenbeschriftung eher der Inhalt des Elements als dessen valueAttribut ist, scheint es den Trick zu tun , diesen Inhalt innerhalb eines <SPAN>mit einem widthAttribut zu platzieren, das einige Pixel schmaler als das der Schaltfläche ist (sogar) in IE6 :-).

Brian Nixon
quelle
1
Für etwas sehr Einfaches können Sie auch <Button> mit einem <br> an der gewünschten Haltestelle verwenden.
KevinH
Wird verwendet, funktioniert aber in neueren Versionen von Chrome nicht mehr.
Joe Mabel
6

Ich habe festgestellt, dass eine Schaltfläche funktioniert, dass Sie sie jedoch hinzufügen möchten style="height: 100%;", damit mehr als die erste Zeile in Safari für iPhone iOS 5.1.1 angezeigt wird

Nick Saemenes
quelle
3
   white-space: normal;
   word-wrap: break-word;

"Beide" haben bei mir funktioniert.

Bhavani Raju
quelle
2

Solche mehrzeiligen Schaltflächen sind nicht wirklich trivial zu implementieren. Diese Seite enthält eine interessante (wenn auch etwas veraltete) Diskussion zu diesem Thema. Ihre beste Wahl wäre wahrscheinlich, entweder die mehrzeilige Anforderung zu löschen oder eine benutzerdefinierte Schaltfläche mit z. B. divs und CSS zu erstellen und JavaScript hinzuzufügen, damit sie als Schaltfläche funktioniert.

Daan
quelle
Das Problem ist, dass ich ASP.Net verwende und das Steuerelement asp: button mit den Attributen CommandName und CommandArgument verwende. Ich kann nicht einfach ein anderes Steuerelement verwenden.
Peter
2

Wenn wir einige innere Unterteilungen innerhalb eines <button>Tags wie diesem haben -

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

Manchmal überschneiden sich Text der Klasse A mit Daten der Klasse 1, da sich beide in einem einzigen Schaltflächen-Tag befinden. Ich versuche den Tex zu brechen mit-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

Aber das wird nicht funktionieren, dann versuche ich das-

white-space: normal;

Nachdem ich die oben genannten CSS-Eigenschaften entfernt und meine Aufgabe erledigt habe.

Hoffnung wird für alle funktionieren !!!

S. Yadav
quelle
1
Wie unterscheidet sich das von dieser Antwort?
Christian Gollhardt
Wenn Sie bemerken, habe ich das mit dem Button-Tag verwendet.
S.Yadav
Divs sind innerhalb einer Schaltfläche nicht erlaubt, es ist kein korrektes HTML.
Ian Devlin
1
word-wrap: break-word;

arbeitete für mich.

Juubes
quelle