::first-line
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Phần tử giả CSS ::first-line áp dụng kiểu cho dòng đầu tiên của một block container.
Try it
p::first-line {
font-size: 1.2rem;
font-weight: bold;
text-decoration: underline;
}
<p>
In warm ocean waters around the world, you may see a strange sight: A fish
leaping from the water and soaring dozens of meters before returning to the
ocean's depths. Early Mediterranean sailors thought these flying fish returned
to the shore at night to sleep, and therefore called this family of marine
fish Exocoetidae.
</p>
Hiệu ứng của ::first-line bị giới hạn bởi độ dài và nội dung của dòng đầu tiên văn bản trong phần tử. Độ dài của dòng đầu tiên phụ thuộc vào nhiều yếu tố, bao gồm chiều rộng của phần tử, chiều rộng tài liệu, và cỡ chữ. ::first-line không có hiệu lực khi con đầu tiên của phần tử, vốn sẽ là phần đầu của dòng đầu tiên, là một phần tử block-level inline, chẳng hạn như một bảng inline.
Note:
Selectors Level 3 đã giới thiệu ký hiệu dấu hai chấm đôi (::) để phân biệt phần tử giả với dấu hai chấm đơn (:) của lớp giả. Các trình duyệt chấp nhận cả ::first-line và :first-line, được giới thiệu trong CSS2.
Đối với mục đích của CSS background, phần tử giả ::first-line giống như một phần tử inline-level, có nghĩa là trong một dòng đầu tiên căn trái, background có thể không kéo dài đến hết lề phải.
Các thuộc tính được phép
Chỉ một tập hợp nhỏ các thuộc tính CSS có thể được dùng với phần tử giả ::first-line:
- Tất cả thuộc tính liên quan đến font:
font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretch, vàfont-family - Tất cả thuộc tính liên quan đến background:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment, vàbackground-blend-mode - Thuộc tính
color word-spacing,letter-spacing,text-decoration,text-transform, vàline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style, vàvertical-align.
Cú pháp
::first-line {
/* ... */
}
Ví dụ
Tạo kiểu dòng đầu tiên của đoạn văn
HTML
<p>
Styles will only be applied to the first line of this paragraph. After that,
all text will be styled like normal. See what I mean?
</p>
<span>
The first line of this text will not receive special styling because it is not
a block-level element.
</span>
CSS
::first-line {
color: blue;
font-weight: bold;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-elements */
margin-left: 20px;
text-indent: 20px;
}
Kết quả
Tạo kiểu dòng đầu tiên của phần tử text SVG
Trong ví dụ này, chúng ta tạo kiểu cho dòng đầu tiên của phần tử <text> SVG bằng cách sử dụng phần tử giả ::first-line.
Note: Tính năng này hiện có hỗ trợ hạn chế.
HTML
<svg viewBox="0 0 320 150">
<text y="20">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
</text>
</svg>
CSS
Để làm cho phần tử <text> SVG xuống dòng thành nhiều dòng, chúng ta sử dụng thuộc tính CSS white-space. Sau đó chúng ta chọn dòng đầu tiên bằng phần tử giả ::first-line.
text {
white-space: break-spaces;
}
text::first-line {
fill: blue;
font-weight: bold;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |