ต้องการเยื้องข้อความในองค์ประกอบ HTML หรือไม่? คุณสามารถเยื้องบรรทัดแรกของย่อหน้าโดยใช้ CSS!
โดยทำดังนี้:
เยื้องบรรทัดแรกของย่อหน้าด้วยการเยื้องข้อความ
สมมติว่าคุณมีข้อความในย่อหน้าดังนี้:
<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;
}นี่คือสิ่งที่จะมีลักษณะ ย่อหน้าแรกไม่เลื่อน และย่อหน้าที่สองคือ:
