đầu tiên-line yếu tố giả không làm việc cho p nguyên tố

Question

p::first-line { 
 
    text-transform: uppercase; 
 
} 
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Như bạn thấy, dòng đầu tiên chưa được chuyển đổi thành chữ hoa. Tôi đang làm gì sai?

Tôi đang sử dụng OS X 10.11.6 và Safari 9.1.2 (11601.7.7).

Answer 1

Phần tử giả của bạn hoạt động tốt. Vấn đề bạn đang gặp phải là lỗi đã biết, chưa được giải quyết trên 10 năm trong Công cụ Webkit về ::first-line không chấp nhận text-transform.

Lỗi cụ thể này đã được báo cáo nhiều lần, nhưng có vẻ như không có giải pháp nào. Kiểm tra ba của các báo cáo tôi thấy:

• https://bugs.chromium.org/p/chromium/issues/detail?id=142827

• https://bugs.chromium.org/p/chromium/issues/detail?id=129669

• https://bugs.webkit.org/show_bug.cgi?id=3409

p::first-line { 
 
    color: red; 
 
} 
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

---

Đối với hồ sơ, các thuộc tính ::first-line chấp nhận là:

• thuộc tính font
• thuộc tính màu
• tính nền
• word-khoảng cách
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• rõ ràng

Bạn có thể tìm thêm về ::first-line trong this page.

---

Lưu ý: Bug 129669 trên Chromium đã được cố định kể từ 26 Tháng chín ^thứ 2017.

Answer 2

Bạn có thể xem tài sản mà bị loại trừ việc sử dụng với ::first-linehere.Trong số đó có

.element::first-line { 
    font-style: ... 
    font-variant: ... 
    font-weight: ... 
    font-size: ... 
    font-family: ... 

    line-height: ... 
    color: ... 
    word-spacing: ... 
    letter-spacing: ... 
    text-decoration: ... 
    **text-transform: ...** 

    background-color: ... 
    background-image: ... 
    background-position: ... 
    background-repeat: ... 
    background-size: ... 
    background-attachment: ... 
} 

Answer 3

Rõ ràng ::first-line và text-transform kết hợp không hoạt động trong các trình duyệt webkit. Trong Firefox, mã của bạn hoạt động tốt. Kiểm tra this bug.