Bagaimana cara membungkus teks tombol HTML dengan lebar tetap?

Saya hanya memperhatikan bahwa jika Anda memberi tombol HTML lebar tetap, teks di dalam tombol tidak akan pernah terbungkus. Saya sudah mencobanya dengan kata-bungkus, tetapi potongan kata meskipun ada ruang yang tersedia untuk membungkus.

Bagaimana saya bisa membuat teks tombol HTML dengan lebar tetap seperti tablecell?

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

Kelas CSS tidak melakukan apa-apa selain menambahkan batas dan memodifikasi padding. Jika saya menambahkan word-wrap:break-wordke tombol ini, itu akan membungkusnya seperti ini:

Roos Sturingen / Sen
sors

Dan saya tidak ingin memotongnya di tengah kata jika mungkin untuk memotongnya di antara kata-kata.

Saya menemukan bahwa Anda dapat menggunakan properti CSS white-space:

white-space: normal;

Dan itu akan memecahkan kata-kata sebagai teks biasa.

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

Milik saya bekerja dengan keduanya

Anda dapat memaksanya (izin browser, saya bayangkan) dengan memasukkan jeda baris di sumber HTML, seperti ini:

<INPUT value="Line 1
Line 2">

Tentu saja bekerja di mana menempatkan jeda baris belum tentu sepele ...

Jika Anda dapat menggunakan HTML <BUTTON>alih-alih sebuah <INPUT>, sedemikian rupa sehingga label tombol adalah konten elemen daripada valueatributnya, menempatkan konten itu di dalam <SPAN>dengan widthatribut yang beberapa piksel lebih sempit daripada yang ada di tombol tampaknya dapat melakukan trik (bahkan di IE6 :-).

Saya telah menemukan bahwa sebuah tombol berfungsi, tetapi Anda ingin menambahkan style="height: 100%;"ke tombol itu sehingga akan menampilkan lebih dari baris pertama pada Safari untuk iPhone iOS 5.1.1

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

"Keduanya" bekerja untukku.

Tombol multi-line seperti itu tidak terlalu mudah untuk diterapkan. Halaman ini memiliki diskusi yang menarik (meskipun agak tanggal) tentang masalah ini. Taruhan terbaik Anda mungkin adalah dengan menjatuhkan persyaratan multi-line atau membuat tombol kustom menggunakan misalnya divs dan CSS, dan menambahkan beberapa JavaScript untuk membuatnya berfungsi sebagai tombol.

Jika kita memiliki beberapa divisi di dalam <button>tag seperti ini-

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

Kadang-kadang Teks kelas A tumpang tindih pada data class1 karena keduanya berada dalam satu tag tombol. Saya mencoba untuk memecahkan tex menggunakan-

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

Tapi ini tidak akan berhasil maka saya coba ini-

white-space: normal;

setelah menghapus properti css di atas dan menyelesaikan tugas saya.

Harapan akan bekerja untuk semua !!!

word-wrap: break-word;

bekerja untukku.