Jak zawinąć tekst przycisku HTML o stałej szerokości?

Właśnie zauważyłem, że jeśli dasz przyciskowi HTML stałą szerokość, tekst wewnątrz przycisku nigdy nie zostanie zawinięty. Próbowałem z zawijaniem wyrazów, ale to fragmenty słowa, mimo że są dostępne miejsca do zawijania.

Jak mogę utworzyć tekst przycisku HTML z zawijaniem o stałej szerokości, tak jak w przypadku każdej tablicy tablicowej?

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

Klasy CSS robią tylko dodawanie ramek i modyfikowanie wypełnienia. Jeśli dodam word-wrap:break-worddo tego przycisku, zawinie go w następujący sposób:

Roos Sturingen / Sen
sors

I nie chcę, aby odcinał się w środku słowa, jeśli możliwe jest odcinanie go między słowami.

Odkryłem, że możesz skorzystać z właściwości CSS białych znaków:

white-space: normal;

I rozbije słowa jak zwykły tekst.

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

Mój działa z oboma

Można to wymusić (wydaje mi się, że pozwala na to przeglądarka), wstawiając podział wiersza w źródle HTML, w następujący sposób:

<INPUT value="Line 1
Line 2">

Oczywiście ustalenie, gdzie należy wstawić podział linii, niekoniecznie jest trywialne ...

Jeśli można używać HTML <BUTTON>zamiast <INPUT>, tak że przycisk etykieta jest zawartość elementu, a nie jej valueatrybutem, umieszczanie tych treści Wewnątrz <SPAN>z widthatrybutu, który jest kilka pikseli węższy niż przycisku wydaje rade (nawet w IE6 :-).

Zauważyłem, że przycisk działa, ale chcesz go dodać, style="height: 100%;"aby wyświetlał więcej niż pierwszą linię w Safari na iPhone'a iOS 5.1.1

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

„Oba” działały dla mnie.

Tego rodzaju wieloliniowe przyciski nie są tak naprawdę łatwe. Ta strona zawiera interesującą (choć nieco przestarzałą) dyskusję na ten temat. Najlepszym rozwiązaniem byłoby porzucenie wymogu dotyczącego wielu wierszy lub utworzenie niestandardowego przycisku przy użyciu np. divS i CSS oraz dodanie JavaScript, aby działał jak przycisk.

Jeśli w <button>tagu są jakieś wewnętrzne podziały, takie jak to-

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

Kiedyś Tekst klasy A nakłada się na dane klasy 1, ponieważ oba są w jednym tagu przycisku. Próbuję złamać tex używając

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

Ale to nie zadziała, a potem spróbuję…

white-space: normal;

po usunięciu powyższych właściwości css i wykonaniu zadania.

Nadzieja zadziała dla wszystkich !!!

word-wrap: break-word;

pracował dla mnie.