[英]first-line pseudo element not working for p element
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>
As you can see, the first line hasn't been converted to uppercase. 如您所见,第一行尚未转换为大写。 What am I doing wrong?
我究竟做错了什么?
I'm using OS X 10.11.6, and Safari 9.1.2 (11601.7.7). 我使用的是OS X 10.11.6和Safari 9.1.2(11601.7.7)。
Your pseudo-element works just fine. 你的伪元素工作正常。 The issue you are facing is a known, 10+ year-old, unsolved bug in the Webkit Engine regarding
::first-line
not accepting text-transform
. 你面临的问题是Webkit Engine中一个已知的,已有10年历史的未解决的bug,关于
::first-line
不接受text-transform
。
This particular bug has been reported multiple times, but it seems like there is no solution whatsoever. 已经多次报告了这个特定的错误,但似乎没有任何解决方案。 Check out three of the reports I found:
查看我发现的三个报告:
https://bugs.chromium.org/p/chromium/issues/detail?id=142827 https://bugs.chromium.org/p/chromium/issues/detail?id=142827
https://bugs.chromium.org/p/chromium/issues/detail?id=129669 https://bugs.chromium.org/p/chromium/issues/detail?id=129669
https://bugs.webkit.org/show_bug.cgi?id=3409 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>
For the record, the properties ::first-line
accepts are: 对于记录,属性
::first-line
接受的是:
You can find more about ::first-line
in this page . 你可以在这个页面找到更多关于
::first-line
。
Note: Bug 129669 on Chromium has been fixed since September 26 th 2017. 注意:Chromium上的错误129669已于2017年9月26 日修复。
You can see the properties that are excluded from use with ::first-line
here . 您可以在此处查看使用
::first-line
排除的属性。 Among them are 其中有
.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: ...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.