এই CSS সিউডো এলিমেন্ট একটি উপাদানের বিষয়বস্তুর প্রথম লাইন নির্বাচন করে। যাইহোক, লাইনের দৈর্ঘ্য উইন্ডোর আকার অনুযায়ী পরিবর্তিত হতে পারে যদি লেখার প্রস্থ স্থির না হয়।
আসুন CSS ::first-line pseudo element −
এর একটি উদাহরণ দেখিউদাহরণ
<!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 pseudo element −
এর আরেকটি উদাহরণ দেখিউদাহরণ
<!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> আউটপুট
