วิธีการตัดข้อความของปุ่ม HTML ด้วยความกว้างคงที่?

ฉันเพิ่งสังเกตเห็นว่าถ้าคุณให้ความกว้างคงที่ของปุ่ม HTML ข้อความในปุ่มนั้นจะไม่ถูกพันทับ ฉันลองด้วยการตัดคำ แต่ตัดคำแม้ว่าจะมีช่องว่างที่จะห่อ

ฉันจะทำให้ข้อความของปุ่ม HTML ด้วยการตัดความกว้างคงที่เช่นเดียวกับ 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>

คลาส CSS ไม่ได้ทำอะไรนอกจากการเพิ่มเส้นขอบและแก้ไขการเติมเต็ม ถ้าฉันเพิ่มword-wrap:break-wordปุ่มนี้มันจะปิดมันแบบนี้:

Roos Sturingen / Sen
sors

และฉันไม่ต้องการให้มันตัดคำกลางคำถ้าเป็นไปได้ที่จะตัดมันออกระหว่างคำ

ฉันพบว่าคุณสามารถใช้ประโยชน์จากคุณสมบัติ CSS white-space:

white-space: normal;

และมันจะแบ่งคำเป็นข้อความปกติ

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

ฉันทำงานได้ทั้งกับ

คุณสามารถบังคับมัน (ฉันอนุญาตให้เบราว์เซอร์จินตนาการ) โดยการแทรกตัวแบ่งบรรทัดในซอร์ส HTML เช่นนี้:

<INPUT value="Line 1
Line 2">

แน่นอนว่าการวางตำแหน่งตัวแบ่งบรรทัดไม่จำเป็นต้องเป็นเรื่องเล็กน้อย ...

หากคุณสามารถใช้ HTML <BUTTON>แทนที่จะเป็น<INPUT>เช่นนั้นป้ายปุ่มเป็นเนื้อหาขององค์ประกอบแทนที่จะvalueวางไว้ที่เนื้อหานั้นภายในเนื้อหาที่<SPAN>มีwidthแอตทริบิวต์ที่มีพิกเซลไม่กี่พิกเซลที่แคบกว่าของปุ่มดูเหมือนว่าจะหลอกลวง (แม้ ใน IE6 :-)

ฉันพบว่าปุ่มใช้งานได้ แต่คุณจะต้องเพิ่มstyle="height: 100%;"ปุ่มเพื่อให้มันแสดงมากกว่าบรรทัดแรกบน Safari สำหรับ iPhone iOS 5.1.1

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

"ทั้งคู่" ทำงานให้ฉัน

ปุ่มหลายสายเช่นนั้นไม่ได้นำไปใช้จริง หน้านี้มีการอภิปรายที่น่าสนใจ (แต่ค่อนข้างเก่า) ในหัวข้อ ทางออกที่ดีที่สุดของคุณอาจเป็นการวางข้อกำหนดหลายบรรทัดหรือสร้างปุ่มที่กำหนดเองโดยใช้เช่นdivs และ CSS และเพิ่ม JavaScript เพื่อให้ทำงานเป็นปุ่ม

หากเรามีหน่วยงานภายในอยู่ภายใน<button>แท็กเช่นนี้ -

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

ข้อความของคลาส A บางครั้งทับซ้อนกับข้อมูล class1 เพราะทั้งคู่อยู่ในแท็กปุ่มเดียว ฉันพยายามแบ่งข้อความโดยใช้ -

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

แต่นี่มันใช้งานไม่ได้แล้วฉันก็ลองอันนี้ -

white-space: normal;

หลังจากลบคุณสมบัติ css ด้านบนและทำงานของฉันเสร็จ

หวังว่าจะใช้ได้สำหรับทุกคน !!!

word-wrap: break-word;

ทำงานให้ฉัน