我想用红色显示第一个字母,但是我注意到当我使用display:-webkit-box
时,first-letter
属性可能不再工作。
预期行为:将样式应用于首字母(仅在CSS中),并保留用于激活-webkit-line-clamp
属性的display
属性(或寻找CSS替代方案,以便像现在一样显示仅有的两个首行,而不使用line-clamp
和display
属性,它们将允许执行首字母
属性)。
null
h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
border: 1px solid lightgray;
}
h2::first-letter {
color: red;
}
<h2>This is a pretty simple test</h2>
null
准确地说,::first-letter
只适用于:
显示:块;
显示:内联块;
显示:流-根;
所以如果你想要一个适合你的结果,你应该使用JS。