Source

ข้อความ

เอกสารประกอบและตัวอย่างสำหรับยูทิลิตี้ข้อความทั่วไปเพื่อควบคุมการจัดแนว การตัดคำ น้ำหนัก และอื่นๆ

การจัดตำแหน่งข้อความ

ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ

ความทะเยอทะยาน dedisse scripsis iudicaretur. Cras mattis iudicium purus นั่ง amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. ที่ nos hinc posthac, sitientis piros Afros Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus นั่ง amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</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.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- 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การตั้งค่าoverflow-wrap: break-word(และword-break: break-wordสำหรับความเข้ากันได้ของ IE และ Edge)

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>