การเย่อยหน้าข้อความด้วย CSS text-indent

ใช้คุณสมบัติ text-indent เพื่อกำหนดการเย่อยบรรทัดแรกของย่อหน้า (paragraph)

ตัวอย่างที่ 1: หน่วย px

<!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </div> </body> </html>

ตัวอย่างที่ 2: หน่วย em

<!DOCTYPE html> <html> <head> <style> div {    text-indent: 15em; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </div> </body> </html>

คำอธิบาย

ตัวอย่างที่ 1 ใช้ 30px คงที่ ตัวอย่างที่ 2 ใช้ 15em ซึ่งเท่ากับ 15 เท่าของขนาดฟอนต์ปัจจุบัน (ยืดหยุ่นตามขนาดตัวอักษร)

ค่าที่ใช้ได้:

• <length> - px, em, rem, cm, ฯลฯ (รองรับค่าลบสำหรับ hanging indent)
• <percentage> - เปอร์เซ็นต์ของความกว้าง containing block
• each-line - เย่อยทุกบรรทัดหลัง forced line break (CSS Text Level 3)
• hanging - เย่อยทุกบรรทัดยกเว้นบรรทัดแรก (CSS Text Level 3)

การประยุกต์ใช้:

• Hanging indent (ค่าลบ): ใช้ใน bibliography, reference list
• Responsive indent: ใช้ em หรือ % ให้ปรับตามขนาดหน้าจอ
• RTL languages: text-indent ทำงานที่ด้านขวาในโหมด RTL

คุณสมบัติที่เกี่ยวข้อง:

• text-align - จัดตำแหน่งข้อความ (left, right, center, justify)
• hanging-punctuation - วางเครื่องหมายวรรคตอนนอกขอบ