ข้อความ
เอกสารประกอบและตัวอย่างสำหรับยูทิลิตี้ข้อความทั่วไปเพื่อควบคุมการจัดแนว การตัดคำ น้ำหนัก และอื่นๆ
การจัดตำแหน่งข้อความ
ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ
ข้อความตัวยึดตำแหน่งบางส่วนเพื่อแสดงการจัดตำแหน่งข้อความให้เหมาะสม คุณจะทำแบบเดียวกันกับฉันไหม ถึงเวลาเผชิญหน้ากับเสียงเพลง ฉันไม่ใช่ท่วงทำนองของคุณอีกต่อไป ได้ยินว่าสวย มาเป็นกรรมการ แล้วสาวๆ จะไปเลือกตั้ง ฉันรู้สึกได้ถึงนกฟีนิกซ์ในตัวฉัน สวรรค์อิจฉาความรักของเรา นางฟ้ากำลังร้องไห้จากเบื้องบน ใช่ คุณพาฉันไปยูโทเปีย
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
สำหรับการจัดตำแหน่งซ้าย ขวา และตรงกลาง คลาสแบบตอบสนองจะพร้อมใช้งานซึ่งใช้เบรกพอยต์ความกว้างของวิวพอร์ตเดียวกันกับระบบกริด
ข้อความชิดซ้ายในขนาดวิวพอร์ตทั้งหมด
ข้อความที่จัดกึ่งกลางบนวิวพอร์ตทุกขนาด
ข้อความชิดขวาบนขนาดวิวพอร์ตทั้งหมด
ข้อความชิดซ้ายบนวิวพอร์ตขนาด SM (เล็ก) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด MD (กลาง) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด LG (ใหญ่) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด XL (ใหญ่พิเศษ) หรือกว้างกว่า
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
การตัดข้อความและล้น
ตัดข้อความด้วย.text-wrap
ชั้นเรียน
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
ป้องกันไม่ให้ห่อข้อความด้วย.text-nowrap
คลาส
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
สำหรับเนื้อหาที่ยาวขึ้น คุณสามารถเพิ่ม.text-truncate
คลาสเพื่อตัดข้อความด้วยจุดไข่ปลา ต้องdisplay: inline-block
หรือdisplay: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
ตัวแบ่งคำ
ป้องกันสตริงข้อความยาวๆ ไม่ให้ทำลายเลย์เอาต์ของส่วนประกอบโดยใช้.text-break
to set word-wrap: break-word
และword-break: break-word
. เราใช้word-wrap
แทนการoverflow-wrap
รองรับเบราว์เซอร์ที่กว้างขึ้น และเพิ่มการเลิกใช้งานword-break: break-word
เพื่อหลีกเลี่ยงปัญหากับคอนเทนเนอร์แบบยืดหยุ่น
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
การแปลงข้อความ
แปลงข้อความในส่วนประกอบด้วยคลาสการใช้อักษรตัวพิมพ์ใหญ่
ข้อความตัวพิมพ์เล็ก
ข้อความตัวพิมพ์ใหญ่
ข้อความ CapiTaliZed
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
สังเกตว่า.text-capitalize
เปลี่ยนเฉพาะอักษรตัวแรกของแต่ละคำ โดยไม่กระทบกับตัวพิมพ์ของตัวอักษรอื่นๆ
น้ำหนักแบบอักษรและตัวเอียง
เปลี่ยนน้ำหนัก (ตัวหนา) ของข้อความหรือตัวเอียงอย่างรวดเร็ว
ข้อความตัวหนา
ข้อความแสดงน้ำหนักที่ชัดเจนยิ่งขึ้น (สัมพันธ์กับองค์ประกอบหลัก)
ข้อความน้ำหนักปกติ
ข้อความที่มีน้ำหนักเบา
ข้อความน้ำหนักเบา (สัมพันธ์กับองค์ประกอบหลัก)
ข้อความตัวเอียง
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
โมโนสเปซ
เปลี่ยนการเลือกเป็นแบบอักษร monospace ของเราด้วย.text-monospace
.
นี่อยู่ในโมโนสเปซ
<p class="text-monospace">This is in monospace</p>
รีเซ็ตสี
รีเซ็ตสีของข้อความหรือลิงก์ด้วย.text-reset
เพื่อให้รับสีมาจากพาเรนต์
ข้อความปิดเสียงพร้อมลิงก์รีเซ็ต
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
ตกแต่งข้อความ
ลบการตกแต่งข้อความด้วย.text-decoration-none
คลาส
<a href="#" class="text-decoration-none">Non-underlined link</a>