ทวิตเตอร์ Bootstrap ปุ่มข้อความห่อคำ

186

สำหรับชีวิตของฉันฉันไม่สามารถรับปุ่ม bootstrap twitter เหล่านี้เพื่อตัดข้อความลงบนหลายบรรทัดพวกเขาดูเหมือนเป็นเช่นนั้น

ฉันไม่สามารถโพสต์ภาพได้ดังนั้นนี่คือสิ่งที่กำลังทำ ...

[นี่คือ bu] ข้อความตัน

ฉันอยากให้มันดูเหมือนว่า

[นี้เป็น ]

[ข้อความปุ่ม]

<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/ - คุณจะต้องขยายคอลัมน์ด้านขวาเพื่อให้พาเนลติดกัน

— M_Becker
แหล่งที่มา

คุณสามารถสร้าง jsfiddle หรือทดสอบอะไรได้บ้าง ??

— Javascript Coder

1

ทำไมคุณไม่แทรก<br>ตำแหน่งที่คุณต้องการแทรกตัวแบ่งบรรทัด

— ntalbs

ไม่สามารถใช้งานได้เนื่องจากเนื้อหาของปุ่มจะแตกต่างกันไปตามโหลดจากฐานข้อมูล

— M_Becker

อีกทางหนึ่งjsfiddle.net/TTKtb/4

— Javascript Coder

หากคุณแทรก <br> ตรงจุดที่คุณต้องการให้ข้อความของคุณล้อมรอบคุณจะได้รับการขึ้นบรรทัดใหม่และการตัดข้อความ ฉันรู้ว่านี่ไม่ใช่วิธีแก้ปัญหาเมื่อคุณมีข้อความจำนวนมาก แต่เมื่อคุณมีคำสามหรือสี่คำที่คุณต้องการห่อสิ่งนี้อาจช่วยได้!

— pebox11

360

ลองนี้: เพิ่มwhite-space: normal; เป็นคำจำกัดความลักษณะของปุ่ม Bootstrap หรือคุณสามารถแทนที่รหัสที่คุณแสดงด้วยปุ่มด้านล่าง

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

ฉันได้อัพเดทซอของคุณที่นี่เพื่อแสดงให้เห็นว่ามันออกมาได้อย่างไร

— Brian Kinyua
แหล่งที่มา

Ahh ว้าว แค่เงยหน้าขึ้นมอง ไม่ทราบด้วยซ้ำว่ามีโค้ด CSS อยู่ ขอบคุณสำหรับความช่วยเหลือของคุณ! ใช้เวลาหลายชั่วโมงในการพยายามทำสิ่งนี้

— M_Becker

4

@ user2063032 ผมคิดว่าผู้ชายคนนี้ดีที่สุดสามารถอธิบายสีขาวพื้นที่เชื่อมโยง

— Brian Kinyua

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

— Brian Kinyua

@ user2063032 หากคำตอบได้แก้ไขปัญหาของคุณแล้วโปรดยอมรับมัน ขอบคุณ :)

— Brian Kinyua

2

หลายปีต่อมา ... ช่วยฉันอีก ## ชั่วโมง ขอบคุณ

— Nie Selam

67

คุณสามารถเพิ่มคลาสนี้ได้

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

— Getsomepeaches
แหล่งที่มา

5

ฉันยังต้องการword-break: normalแทนที่ค่าที่ตั้งโดย bootstrap แต่แล้วมันก็มีเสน่ห์!

— crowmagnumb

1

คุณสามารถเพิ่มสไตล์เหล่านี้และใช้งานได้ตามที่คาดไว้

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

— ไก่
แหล่งที่มา

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

— Getsomepeaches

1

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

— hwjp
แหล่งที่มา