CSS属性text-transform和伪元素::first-line已成为long time的CSS规范的一部分,但是由于人类不知道的某些原因,Webkit浏览器仍然不允许将它们组合在一起。该组合可以无缝运行,并且可以在Firefox和“ IE的现代版本”(以前是mormoron)中正常运行。

有没有解决方法? (理想情况下不使用javascript)

我想使用CSS将段落的第一行设置为大写,并且应在Chrome和Firefox中都可以使用。

最佳答案

如果修改第一行和第一个字母的字体大小(假设第一个字母是唯一的大写字母),则可以使用font-variant: small-caps;进行关闭:



div {
  font: 16px verdana;
}

div::first-line {
  font-variant: small-caps;
  font-size: 150%;
}

div::first-letter {
  font-size: 70%;
}

<div>
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.
</div>

关于css - 如何在Webkit浏览器(Chrome,Safari)的段落的第一行中使用全大写,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31082207/

10-12 12:40
查看更多