Cách tiếp cận
Đặt cược tốt nhất của bạn là xem video dài 5 phút của Ethan và sau đó tham khảo điều này:
Cách trình duyệt chéo (đánh dấu bổ sung)
Chỉ cần bọc ký tự đầu tiên của đoạn văn trong một khoảng, sau đó nhắm mục tiêu khoảng cách đó bằng CSS và định kiểu.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Cách CSS3 (không có thêm đánh dấu)
Nhắm mục tiêu ký tự đầu tiên của đoạn đầu tiên bằng bộ chọn lớp giả. Không cần đánh dấu bổ sung, nhưng không hỗ trợ IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Con initial-letterđường
Hỗ trợ trình duyệt cho initial-letterkhá thưa thớt tại thời điểm viết bài này, nhưng nó có thể được sử dụng để tính toán số dòng mà ký tự có giới hạn thả nên chiếm và kích thước phông chữ thay vì bạn tự làm điều đó.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| Không | Không | Không | Không | TP * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Không | Không | Không | 14.0-14.4 * |