ต้องการเยื้องข้อความใน HTML element? คุณสามารถเยื้องบรรทัดแรกของย่อหน้าได้ด้วย CSS!
วิธีทำดังนี้:
เยื้องบรรทัดแรกของย่อหน้าด้วย text-indent
สมมติคุณมีข้อความในย่อหน้าประมาณนี้:
<p class="indent"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat! </p>คุณสามารถใช้คุณสมบัติ CSS text-indent เพื่อเยื้องบรรทัดแรกเป็นความยาวเฉพาะ:
p.indent { text-indent: 30px; }ผลลัพธ์จะลักษณะนี้:
เช่นเดียวกับคุณสมบัติความยาว CSS อื่นๆ คุณสามารถใช้หน่วยได้ทุกหน่วย พิกเซล (px), em, rem, แม้แต่เปอร์เซ็นต์ (%) ก็ได้
การใช้หน่วยสัมพัทธ์อย่างเปอร์เซ็นต์จะเปลี่ยนขนาดการเยื้องตามความกว้างของหน้าเว็บ หน้าเว็บกว้างขึ้น การเยื้องจะใหญ่ขึ้น
คุณยังสามารถใช้ค่า text-indent เป็นลบได้ หากต้องการให้บรรทัดแรกล้ำออกไปทางซ้าย
p.indent { text-indent: -30px; }ลักษณะการเยื้องลบในย่อหน้า:
ใช้ margin-left หากต้องการเลื่อนย่อหน้าทั้งหมดไปทางขวา
หากต้องการเลื่อนย่อหน้าทั้งหมดไปขวา ไม่ใช่แค่บรรทัดแรก ให้ใช้คุณสมบัติ margin-left
p.shifted { margin-left: 30px; }ลักษณะผลลัพธ์ ย่อหน้าแรกไม่เลื่อน ย่อหน้าที่สองเลื่อน:
