Phần tử giả CSS này chọn dòng đầu tiên của nội dung của một phần tử. Tuy nhiên, độ dài của dòng có thể thay đổi theo kích thước cửa sổ nếu độ rộng của phần chứa văn bản không được cố định.
Hãy xem một ví dụ về CSS ::phần tử giả dòng đầu tiên -
Ví dụ
<!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> Đầu ra
Ban đầu khi kích thước chiều rộng cửa sổ là ‘606px’ -
Khi chiều rộng cửa sổ được tăng lên -
Khi chiều rộng của phần tử chứa văn bản được cố định và cửa sổ được thay đổi kích thước -
Hãy xem một ví dụ khác về CSS ::phần tử giả dòng đầu tiên -
Ví dụ
<!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> Đầu ra
