টুইটার বুটস্ট্র্যাপ বোতাম পাঠ্য শব্দ মোড়ানো

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;কিন্তু এটি কোনও পার্থক্য করছে না।

সম্পাদনা করুন। জেএসফিডেল http://jsfiddle.net/TTKtb/ - আপনার প্যানেলগুলি একে অপরের পাশে বসার জন্য এটি ডান কলামটি প্রসারিত করতে হবে।

Comments

আপনি কি এর জন্য জিসফিল তৈরি করতে পারেন বা কিছু পরীক্ষা করতে পারেন ??

— জাভাস্ক্রিপ্ট কোডার

আপনি <br>যেখানে লাইন ব্রেক sertোকাতে চান সেখানে don'tোকান না কেন ?

— ntalbs

বোতামগুলির বিষয়বস্তু কোনও ডাটাবেস থেকে লোড হওয়ার সাথে সাথে পরিবর্তিত হয় as

— এম_বেকার

অন্যভাবে jsfiddle.net/TTKtb/4

— জাভাস্ক্রিপ্ট কোডার

আপনি যদি বিন্দুতে একটি inোকান তবে আপনি চান যে আপনার পাঠ্যটি মোড়ানো হোক এবং আপনি একটি লাইন বিরতি পান এবং পাঠ্য মোড়ক পান। আমি জানি যখন আপনার অনেকগুলি পাঠ্য থাকে তখন এটি সমাধান হয় না তবে যখন আপনার কাছে তিন বা চারটি শব্দ থাকে যা আপনি মোড়ানো করতে চান এটি সাহায্য করতে পারে!

— 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

আহ, বাহ! সবেমাত্র তাকিয়ে আছে। এমনকি সিএসএস কোড বিদ্যমান ছিল তাও জানতেন না। আপনার সাহায্যের জন্য ধন্যবাদ! এটির চেষ্টা করার জন্য ঘন্টা সময় ব্যয় করা।

— এম_বেকার

@ ব্যবহারকারী2063032 আমি মনে করি এই লোকটি সাদা স্থানের লিঙ্কটি সর্বোত্তমভাবে ব্যাখ্যা করতে পারে ।

— ব্রায়ান কিন্যুয়া

কোনও উদ্বেগ নেই, আমি স্ট্যাকওভারফ্লো থেকে প্রতিদিন কিছু শিখি। এছাড়াও আপনি খেয়াল করতে পারেন যে উপাদানটি বাটনটি নির্দিষ্ট প্রস্থের হয় যদি সাদা-স্পেস সম্পত্তি ভালভাবে কাজ করে।

— ব্রায়ান কিন্যুয়া

@ ব্যবহারকারী2063032 যদি উত্তরটি আপনার সমস্যার সমাধান করে, দয়া করে এটি গ্রহণ করুন। ধন্যবাদ :)

— ব্রায়ান কিন্যুয়া

বছর পরে ... আমাকে আরও # # ঘন্টা বাঁচিয়েছে। ধন্যবাদ।

— নি সেলাম

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

এফডাব্লুআইডাব্লু, বুস্ট্রপ ৪.৪-তে আপনি .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