Pseudo-element ::first-line ใน CSS เลือกบรรทัดแรกของเนื้อหาภายในองค์ประกอบ (element) อย่างไรก็ตาม ความยาวของบรรทัดอาจเปลี่ยนแปลงตามขนาดหน้าต่างหากความกว้างของข้อความไม่ได้ถูกกำหนดไว้ล่วงหน้า
ตัวอย่าง
ลองดูตัวอย่างการใช้งาน pseudo-element ::first-line ด้านล่างนี้:
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; } </style> </head> <body> <h2>Lorem Ipsum</h2> <p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p> <div id="divDisplay"></div> <script> divDisplay.textContent = 'Current window width: '+window.innerWidth+'px'; window.addEventListener('resize', function() { divDisplay.textContent = 'Current window width: '+window.innerWidth+'px'; }) </script> </body> </html>
ผลลัพธ์
เริ่มต้นเมื่อความกว้างหน้าต่างอยู่ที่ '606px':
เมื่อเพิ่มความกว้างหน้าต่าง:
เมื่อความกว้างขององค์ประกอบที่ครอบข้อความถูกกำหนดไว้และปรับขนาดหน้าต่าง:
ลองดูตัวอย่างเพิ่มเติมของ pseudo-element ::first-line:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: #FF8A00; color: white; } div{ width: 420px; } </style> </head> <body> <div> <h2>Demo Heading</h2> <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> <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. This is demo text. This is demo text. This is demo text. </p> </div> </body> </html>
ผลลัพธ์
