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>
আউটপুট
প্রাথমিক অবস্থায় উইন্ডো প্রস্থ ৬০৬px হলে:
যখন উইন্ডো প্রস্থ বেড়ানো হয়:
যখন টেক্সট ধারক এলিমেন্টের প্রস্থ ফিক্সড থাকে এবং উইন্ডো রিসাইজ করা হয়:
আরেকটি 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>
আউটপুট
