提问者:小点点

如果设置了-webkit-box显示属性,则第一个字母不工作


我想用红色显示第一个字母,但是我注意到当我使用display:-webkit-box时,first-letter属性可能不再工作。

预期行为:将样式应用于首字母(仅在CSS中),并保留用于激活-webkit-line-clamp属性的display属性(或寻找CSS替代方案,以便像现在一样显示仅有的两个首行,而不使用line-clampdisplay属性,它们将允许执行首字母属性)。

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


共1个答案

匿名用户

准确地说,::first-letter只适用于:

  • 显示:块;
  • 显示:内联块;
  • 显示:流-根;

所以如果你想要一个适合你的结果,你应该使用JS。