Bagaimana cara membungkus teks tombol HTML dengan lebar tetap?

197

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.

Peter
sumber

Jawaban:

547

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

white-space: normal;

Dan itu akan memecahkan kata-kata sebagai teks biasa.

Siu
sumber
@GOwen tidak apa-apa sekarang - sementara itu kami mematikan IE6.
low_rents
1
Jawaban lain yang menyarankan word-wrap: break-word;tidak bekerja untuk saya, tetapi ini berhasil.
F1Krazy
15
white-space: normal;
word-wrap: break-word;

Milik saya bekerja dengan keduanya

Richard
sumber
8

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

Brian Nixon
sumber
1
Untuk sesuatu yang sangat sederhana, Anda juga dapat menggunakan <button> dengan <br> pada break point yang diinginkan.
KevinH
Dulu bekerja, tetapi tidak lagi berfungsi di Chrome versi terbaru.
Joe Mabel
6

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

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

"Keduanya" bekerja untukku.

Bhavani Raju
sumber
2

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.

Daan
sumber
Masalahnya adalah bahwa saya menggunakan ASP.Net, menggunakan kontrol tombol asp: dengan atribut CommandName dan CommandArgument. Saya tidak bisa hanya menggunakan kontrol lain.
Peter
2

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

S.Yadav
sumber
1
Apa bedanya dengan jawaban ini ?
Christian Gollhardt
Ya, jika Anda perhatikan, saya telah menggunakannya dengan tag tombol.
S.Yadav
Div tidak diperbolehkan di dalam tombol, itu bukan HTML yang benar.
Ian Devlin
1
word-wrap: break-word;

bekerja untukku.

Juubes
sumber