ข้อความ
เอกสารประกอบและตัวอย่างสำหรับยูทิลิตี้ข้อความทั่วไปเพื่อควบคุมการจัดแนว การตัดคำ น้ำหนัก และอื่นๆ
การจัดตำแหน่งข้อความ
ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ
ความทะเยอทะยาน 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.
สำหรับการจัดตำแหน่งซ้าย ขวา และตรงกลาง คลาสแบบตอบสนองจะพร้อมใช้งานซึ่งใช้เบรกพอยต์ความกว้างของวิวพอร์ตเดียวกันกับระบบกริด
ข้อความชิดซ้ายในขนาดวิวพอร์ตทั้งหมด
ข้อความที่จัดกึ่งกลางบนวิวพอร์ตทุกขนาด
ข้อความชิดขวาบนขนาดวิวพอร์ตทั้งหมด
ข้อความชิดซ้ายบนวิวพอร์ตขนาด SM (เล็ก) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด MD (กลาง) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด LG (ใหญ่) หรือกว้างกว่า
ข้อความชิดซ้ายบนวิวพอร์ตขนาด XL (ใหญ่พิเศษ) หรือกว้างกว่า
การตัดข้อความและล้น
ตัดข้อความด้วย.text-wrap
ชั้นเรียน
ป้องกันไม่ให้ห่อข้อความด้วย.text-nowrap
คลาส
สำหรับเนื้อหาที่ยาวขึ้น คุณสามารถเพิ่ม.text-truncate
คลาสเพื่อตัดข้อความด้วยจุดไข่ปลา ต้องdisplay: inline-block
หรือdisplay: block
.
ตัวแบ่งคำ
ป้องกันสตริงข้อความยาวๆ ไม่ให้ทำลายเลย์เอาต์ของส่วนประกอบโดยใช้.text-break
to set word-wrap: break-word
และword-break: break-word
. เราใช้word-wrap
แทนการoverflow-wrap
รองรับเบราว์เซอร์ที่กว้างขึ้น และเพิ่มการเลิกใช้งานword-break: break-word
เพื่อหลีกเลี่ยงปัญหากับคอนเทนเนอร์แบบยืดหยุ่น
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
การแปลงข้อความ
แปลงข้อความในส่วนประกอบด้วยคลาสการใช้อักษรตัวพิมพ์ใหญ่
ข้อความตัวพิมพ์เล็ก
ข้อความตัวพิมพ์ใหญ่
ข้อความ CapiTaliZed
สังเกตว่า.text-capitalize
เปลี่ยนเฉพาะอักษรตัวแรกของแต่ละคำ โดยไม่กระทบกับตัวพิมพ์ของตัวอักษรอื่นๆ
น้ำหนักแบบอักษรและตัวเอียง
เปลี่ยนน้ำหนัก (ตัวหนา) ของข้อความหรือตัวเอียงอย่างรวดเร็ว
ข้อความตัวหนา
ข้อความแสดงน้ำหนักที่ชัดเจนยิ่งขึ้น (สัมพันธ์กับองค์ประกอบหลัก)
ข้อความน้ำหนักปกติ
ข้อความที่มีน้ำหนักเบา
ข้อความน้ำหนักเบา (สัมพันธ์กับองค์ประกอบหลัก)
ข้อความตัวเอียง
โมโนสเปซ
เปลี่ยนการเลือกเป็นแบบอักษร monospace ของเราด้วย.text-monospace
.
นี่อยู่ในโมโนสเปซ
รีเซ็ตสี
รีเซ็ตสีของข้อความหรือลิงก์ด้วย.text-reset
เพื่อให้รับสีมาจากพาเรนต์
ข้อความปิดเสียงพร้อมลิงก์รีเซ็ต
ตกแต่งข้อความ
ลบการตกแต่งข้อความด้วย.text-decoration-none
คลาส