ट्विटर बूटस्ट्रैप बटन टेक्स्ट वर्ड रैप

Question

मेरे जीवन के लिए मैं इन ट्विटर बूटस्ट्रैप बटन को कई लाइनों पर पाठ लपेटने के लिए प्राप्त करने में असमर्थ हूं, वे इस तरह से दिखाई दे रहे हैं।

मैं चित्र पोस्ट नहीं कर सकता, इसलिए यह वही कर रहा है ...

[यह बू है] टैटन पाठ

मैं चाहूंगा कि यह प्रकट हो

[यह है ]

[टेक्स्ट बटन ]

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

कोई भी सहायताकाफी प्रशंसनीय होगी।

संपादित करें। मैंने जोड़ने की कोशिश की है word-wrap:break-word;लेकिन इससे कोई फर्क नहीं पड़ रहा है ।

संपादित करें। JSFiddle http://jsfiddle.net/TTKtb/ - आपको इसे सही कॉलम का विस्तार करने की आवश्यकता होगी ताकि पैनल एक दूसरे के बगल में बैठें।

Comments

क्या आप उसके लिए jsfiddle या कुछ परीक्षण बना सकते हैं ??

— जावास्क्रिप्ट

<br>जहां आप लाइन ब्रेक सम्मिलित करना चाहते हैं, वहां क्यों नहीं डालें ?

— ntalbs

बटन की सामग्री के रूप में व्यवहार्य नहीं एक डेटाबेस से लोड के रूप में अलग अलग होंगे।

— M_Becker

दूसरा तरीका jsfiddle.net/TTKtb/4

— जावास्क्रिप्ट कोडर

यदि आप उस बिंदु पर एक <br> सम्मिलित करते हैं, तो आप चाहते हैं कि आपका पाठ लपेटें आपको एक पंक्ति विराम और पाठ लपेटता है। मुझे पता है कि यह एक समाधान नहीं है जब आपके पास बहुत सारे पाठ हैं लेकिन जब आपके पास तीन या चार शब्द हैं जिन्हें आप लपेटना चाहते हैं तो यह मदद कर सकता है!

— pebox11

Answer 1

यह कोशिश करें: सफेद-स्थान जोड़ें : सामान्य; बूटस्ट्रैप बटन की शैली परिभाषा या आप नीचे दिखाए गए कोड को बदल सकते हैं

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

मैं अपने बेला अद्यतन किया है यहाँ दिखाने के लिए कि यह कैसे बाहर आता है।

Comments

आह, वाह। बस इसे देखा। यह भी नहीं पता था कि CSS कोड मौजूद है। आपकी सहायताके लिए धन्यवाद! यह काम करने की कोशिश में बिताए गए घंटे।

— M_Becker

@ user2063032 मुझे लगता है कि यह व्यक्ति श्वेत-अंतरिक्ष लिंक को सबसे अच्छा समझा सकता है ।

— ब्रायन किनुआ

कोई चिंता नहीं, मैं स्टैकओवरफ़्लो से प्रत्येक दिन कुछ सीखता हूं। यदि तत्व यानी बटन एक निर्दिष्ट चौड़ाई का है, तो आप यह भी देखेंगे कि व्हाइट-स्पेस प्रॉपर्टी अच्छी तरह से काम करती है।

— ब्रायन किनुआ

@ user2063032 यदि उत्तर ने आपकी समस्या हल कर दी है, तो कृपया इसे स्वीकार करें। धन्यवाद :)

— ब्रायन किनुआ

वर्षों बाद ... मुझे एक और ## घंटे बचाया। धन्यवाद।

— नी सेलम

Answer 2

आप बस इस वर्ग को जोड़ सकते हैं।

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}

Comments

मुझे word-break: normalबूटस्ट्रैप द्वारा निर्धारित मूल्य को ओवरराइड करने की भी आवश्यकता है। लेकिन फिर इसने एक आकर्षण का काम किया!

— क्राउनमैग्नम

Answer 3

आप इन शैली को जोड़ सकते हैं और यह अपेक्षा के अनुरूप काम करता है।

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}

Comments

इनलाइन शैलियों का उपयोग करना आपको केवल उस एक बटन के लिए इसे ठीक करने की अनुमति देगा। इसे एक वर्ग में जोड़ें ताकि आप इसे अपने पूरे प्रोजेक्ट में उपयोग कर सकें। एंकर पर एक वर्ग में एक कॉग परिभाषा का उपयोग बूटस्ट्रैप का उपयोग करते हुए खराब अभ्यास के रूप में देखा जाएगा।

— गेट्सोमेपीचेस

Answer 4

FWIW, Boostrap 4.4 में, आप .text-wrapबटन जैसी चीजों में शैली जोड़ सकते हैं :

   <a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow