如何在 Webkit 浏览器 (Chrome, Safari) 的段落首行使用全大写字母

Question

CSS 属性 text-transform 和伪元素 ::first-line 已成为 long time 的 CSS 规范的一部分，但是由于某些不为人类所知的原因，Webkit 浏览器仍然不允许将它们组合在一起。该组合在 Firefox 和 "modern versions of IE"（曾经是矛盾修饰法）中无缝地工作并且符合预期。

有解决办法吗？（最好不使用 javascript）

我想使用 CSS 将段落的第一行设置为全部大写，它应该在 Chrome 和 Firefox 中工作。

Answer 1

可以通过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>

Answer 2

好的，根据 Rick Hitchcock 的回答，我有一个 CSS 解决方法。通过组合 font-variant: small-caps 并增加字体大小，您可以让 webkit 浏览器提供这种基本外观。 small-caps 对于某些字体来说不是一个好看的排版，您的里程可能会有所不同。我将我的 CSS 包装在特定于 webkit 的媒体查询中，以便更简单的 text-transform 将在非 webkit 浏览器上生效。

这段代码对我有用：

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

...

/* Fix Webkit ::first-line issues */
@media screen and (-webkit-min-device-pixel-ratio:0) {  
  p.opener::first-line {
     font-size:24px;
     font-variant: small-caps;
  }  
  p.opener::first-letter {
     font-size:19px;
  }  
}

如何在 Webkit 浏览器 (Chrome, Safari) 的段落首行使用全大写字母

How to use All-Caps in First Line of paragraph in Webkit Browsers (Chrome, Safari)

css

typography

google-chrome