HTML düğmesinin metni sabit genişlikte nasıl kaydırılır?

Bir HTML düğmesine sabit bir genişlik verirseniz, düğmenin içindeki metnin hiçbir zaman kaydırılmadığını fark ettim. Word-wrap ile denedim, ancak üzerinde boşluklar olmasına rağmen bu kelimenin kesikleri.

Herhangi bir tablecell gibi sabit genişlikli bir HTML düğmesinin metnini nasıl yapabilirim?

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

CSS sınıfları, kenarlık eklemek ve dolguyu değiştirmek dışında hiçbir şey yapmaz. word-wrap:break-wordBu düğmeye eklerseniz , bu şekilde sarılacaktır:

Roos Sturingen / Sen
sors

Ve eğer kelimeler arasında kesmek mümkünse bir kelimenin ortasında kesilmesini istemiyorum.

Beyaz boşluk CSS özelliğini kullanabileceğinizi buldum:

white-space: normal;

Ve sözcükleri normal metin olarak kıracak.

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

Mine her ikisiyle de çalışır

HTML kaynağına şu şekilde satır sonları ekleyerek (tarayıcıya izin veriyor, hayal ediyorum) zorlayabilirsiniz:

<INPUT value="Line 1
Line 2">

Tabii ki satır sonlarını nereye yerleştireceğinizi çalışmak önemsiz değildir ...

<BUTTON>Bunun yerine bir HTML kullanabiliyorsanız <INPUT>, düğme etiketi valueözniteliği yerine öğenin içeriğidir , bu içeriği düğmenin birkaç pikselinden daha dar <SPAN>bir widthözniteliğe sahip bir içine yerleştirmek hile yapar (hatta IE6 :-).

Bir düğmenin çalıştığını buldum, ancak style="height: 100%;"düğmeye iPhone iOS 5.1.1 için Safari'deki ilk satırdan daha fazlasını gösterecek şekilde eklemek isteyeceksiniz

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

"İkisi de" benim için çalıştı.

Bunun gibi çok hatlı düğmelerin uygulanması gerçekten önemsiz değildir. Bu sayfa konuyla ilgili ilginç (biraz tarihli) bir tartışması var. En iyi seçeneğiniz muhtemelen çok satırlı gereksinimi bırakmak veya örneğin divs ve CSS kullanarak özel bir düğme oluşturmak ve düğme olarak çalışması için bazı JavaScriptler eklemek olacaktır.

<button>Etikette böyle bir iç bölüm varsa,

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

Bazen A sınıfı metin, sınıf1 verilerinin çakışmasına neden olur, çünkü her ikisi de tek bir düğme etiketindedir. Tex kullanarak kırmaya çalışıyorum-

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

Ama bu işe yaramayacak, o zaman bunu deniyorum-

white-space: normal;

Yukarıdaki css özelliklerini kaldırdıktan sonra görevimi tamamladım.

Umut herkes için çalışacak !!!

word-wrap: break-word;

benim için çalıştı.