如何在 Webkit 浏览器（Chrome、Safari）的第一行中使用全大写答案

【问题标题】：How to use All-Caps in First Line of paragraph in Webkit Browsers (Chrome, Safari)如何在 Webkit 浏览器（Chrome、Safari）的第一行中使用全大写
【发布时间】：2015-09-13 22:34:24
【问题描述】：

CSS 属性 text-transform 和伪元素 ::first-line 已成为 long time 的 CSS 规范的一部分，但出于某种人类未知的原因，Webkit 浏览器仍然不允许这些结合。这种组合在 Firefox 和“现代版本的 IE”（曾经是一个矛盾的说法）中可以无缝运行，并且符合预期。

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

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

【问题讨论】：

第一段中的情绪总是让我感到愉悦和愉悦。我的意思是很好。值得注意的是，Firefox 通常是 worst 实现 ::first-letter 的那个，参见展览A 和B。但是，是的，像这样的基本内容是 Chrome 最臭名昭著的错误。
在 Chromium 中仍然是一个未修复的错误，code.google.com/p/chromium/issues/detail?id=129669 - 所以我想如果你需要它在 Chrome 中工作，你将不得不使用 JS

标签： css google-chrome typography

【解决方案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>

【讨论】：

谢谢！我用这个和一个媒体查询来让它工作。

【解决方案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;
  }  
}

【讨论】：