तय चौड़ाई के साथ HTML बटन का पाठ कैसे लपेटें?

197

मैंने अभी देखा कि यदि आप HTML बटन को एक निश्चित चौड़ाई देते हैं, तो बटन के अंदर का टेक्स्ट कभी भी लिपटा नहीं होता है। मैंने इसे वर्ड-रैप के साथ आज़माया है, लेकिन इस शब्द के कट्स भले ही रैप करने के लिए उपलब्ध हों।

मैं किसी भी टेबलसेल की तरह एक निश्चित चौड़ाई की लपेट के साथ HTML बटन का पाठ कैसे बना सकता हूं?

<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

और मैं इसे शब्दों के बीच में काटना नहीं चाहता, अगर इसे शब्दों के बीच से काटना संभव है।

— पीटर
स्रोत

547

मैंने पाया कि आप श्वेत-स्थान CSS संपत्ति का उपयोग कर सकते हैं:

white-space: normal;

और यह सामान्य पाठ के रूप में शब्दों को तोड़ देगा।

— Siu
स्रोत

@MGOwen अब ठीक है - हमने इस बीच IE6 को मृत कर दिया।

— low_rents

1

सुझाव देने वाले अन्य जवाबों word-wrap: break-word;ने मेरे लिए काम नहीं किया, लेकिन यह किया।

— F1Krazy

15

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

मेरा दोनों के साथ काम करता है

— रिचर्ड
स्रोत

8

आप इस तरह से HTML स्रोत में लाइन ब्रेक लगाकर इसे (ब्राउज़र की अनुमति, मुझे कल्पना) मजबूर कर सकते हैं:

<INPUT value="Line 1
Line 2">

बेशक काम करने के लिए जहां लाइन को तोड़ने के लिए जगह जरूरी नहीं है ...

यदि आप <BUTTON>इसके बजाय एक HTML का उपयोग कर सकते हैं <INPUT>, जैसे कि बटन लेबल इसकी valueविशेषता के बजाय तत्व की सामग्री है , तो उस सामग्री <SPAN>को एक widthविशेषता के साथ अंदर रखना जो कि बटन की तुलना में कुछ पिक्सेल संकरा है, चाल को लगता है (यहां तक कि IE6 में :-)

— ब्रायन निक्सन
स्रोत

1

कुछ बहुत ही सरल के लिए आप वांछित ब्रेक बिंदु पर एक <br> के साथ <बटन> का उपयोग कर सकते हैं।

— केविन एचएच

काम करते थे, लेकिन अब क्रोम के हाल के संस्करणों में काम नहीं करते हैं।

— जो मैबेल

6

मैंने पाया है कि एक बटन काम करता है, लेकिन आप style="height: 100%;"उस बटन को जोड़ना चाहते हैं , जिससे वह सफारी पर पहली पंक्ति से अधिक दिखाई दे, जो iOS iOS 5.1.1 के लिए है

— निक समान्स
स्रोत

3

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

“दोनों ने मेरे लिए काम किया।

— भवानी राजू
स्रोत

2

मल्टी-लाइन बटन जैसे कि वास्तव में लागू करने के लिए तुच्छ नहीं हैं। इस पृष्ठ में इस विषय पर एक दिलचस्प (हालांकि कुछ हद तक) चर्चा है। आपका सबसे अच्छा शर्त यह होगा कि या तो मल्टी-लाइन की आवश्यकता को छोड़ दें या उदाहरण के लिए divs और CSS का उपयोग करके एक कस्टम बटन बनाएं और इसे एक बटन के रूप में काम करने के लिए कुछ जावास्क्रिप्ट जोड़ दें।

— दान
स्रोत

समस्या यह है कि मैं ASP.Net का उपयोग कर रहा हूं, कमांड बटन का उपयोग कर कमांडनेम और कमांडअर्जमेंट विशेषताओं के साथ। मैं सिर्फ एक दूसरे नियंत्रण का उपयोग नहीं कर सकता।

— पीटर

2

अगर हमारे पास <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>

क्लास ए का शायद ही कभी पाठ क्लास 1 डेटा पर ओवरलैप हो क्योंकि ये दोनों एक बटन टैग में हैं। मैं टेक्स का उपयोग करके तोड़ने की कोशिश करता हूं-

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

लेकिन यह काम नहीं किया तो मैं यह कोशिश करेंगे-

white-space: normal;

सीएसएस गुणों से ऊपर हटाने के बाद और अपना काम पूरा कर लिया।

आशा है कि सभी के लिए काम करेंगे !!!

— S.Yadav
स्रोत

1

यह इस उत्तर से कैसे भिन्न होता है ?

— क्रिश्चियन गोल्हार्ट

यह है, यदि आप नोटिस करते हैं, तो मैंने बटन टैग के साथ उसका उपयोग किया है।

— यादव

एक बटन के भीतर तलाक की अनुमति नहीं है, यह एचटीएमएल सही नहीं है।

— इयान डेवलिन

1

word-wrap: break-word;

मेरे लिए काम किया।

— Juubes
स्रोत