通过CSS为h1元素添加多个字体大小

Question

我需要显示公司名称，以便名称的“主要”部分显示在一行上并且很大，名称的次要部分位于其下方且较小。因为它不是一个口号或“副标题”，我觉得它应该都在同一个h1元素中，理想情况下，通过纯CSS转换（意味着没有跨度或em s，如果它可以避免。

示例：

<h1>Big Bill's Custom Auto Parts</h1>

应显示为：

Big Bill's

自定义汽车零件

是否有纯CSS方式（即使是尚未完全支持的伪类）？

Answer 1

不可能，似乎更有意义的是你有两个不同的标题，并且可以相应地设置样式。

如果在<span>内未添加<h1>，您如何指定更改的位置？

Answer 2

是否允许在标题中包含新行？如果是这样，您可以像这样使用第一行选择器：

HTML

<h1>Foo bar                                                                                            
baz</h1>

CSS

h1 {
  font-size:1em;
  white-space:pre;
}
h1:first-line {
  font-size:3em;
}

Answer 3

不使用额外标题的最短解决方案是使用span元素：

<h1><span>Big Bill's</span> Custom Auto Parts</h1>

CSS：

h1.span {
  /* styling rules */
}

Answer 4

如果你可以使用<br/>打破这一行，那么你可以使用::first-line pseudo-element完成此任务。

Answer 5

你说你想用纯CSS方式做，分离内容和表示。没有额外的spans，没有br。我理解，但如果您考虑问题，则需要根据内容创建演示规则。这有道理吗？是不是要将内容与想要避免的演示文稿混合在一起？

Answer 6

我在这个帖子中尝试了其他的东西，但这终于奏效了。

<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>