CSS में ::first-line स्यूडो-एलिमेंट

CSS का ::first-line स्यूडो-एलिमेंट किसी एलिमेंट की सामग्री की पहली लाइन को चुनता है। हालांकि, यदि टेक्स्ट वाले कंटेनर की चौड़ाई निश्चित नहीं है, तो लाइन की लंबाई विंडो के आकार के अनुसार बदल सकती है।

उदाहरण

आइए CSS ::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' हो:

जब विंडो की चौड़ाई बढ़ाई जाती है:

जब टेक्स्ट वाले एलिमेंट की चौड़ाई निश्चित हो और विंडो का आकार बदला जाए:

एक और उदाहरण

आइए CSS ::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>

आउटपुट