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

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.

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.

white-space: normal;
word-wrap: break-word;

Meins funktioniert mit beiden

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 :-).

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

   white-space: normal;
   word-wrap: break-word;

"Beide" haben bei mir funktioniert.

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.

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

word-wrap: break-word;

arbeitete für mich.