如何利用CSS利用第一线？ ::第一行伪元素不起作用

Question

现在我有一个段落，我想把整个第一行的大写。我已将第一段设置为ID“firstp”并尝试：

#firstp::first-line {
  text-transform: uppercase;
}

我已经使用text-transform: capitalize尝试过，但这也无效。这很奇怪，因为我设法使用#firstp:first-letter更改了第一个字母（更改了字体大小）。

Answer 1

text-transform上的{p> :first-line现在真的很麻烦，请参阅此处的参考http://reference.sitepoint.com/css/text-transform

您可以使用名为 linify https://github.com/octopi/Linify的此jquery插件选择第一行，然后应用text-transform: uppercase的属性

此致

Answer 2

我认为Chrome在“：first-line”方面存在问题。尝试删除它并在此页面上使用james31rock的语法，除了在他的示例中，CSS应该是“#firstp {...”以反映其HTML中的ID而不是“.makeupper”。

Answer 3

为了实现此目的，您必须在正确的语法中使用以下Pseudo-element。例如：

HTML PORTION：

<selection id="Welcome">
<p>Some text</p>
</section>

CSS SHEET：

#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}

我希望这会有所帮助。对不起，迟到了。我猜，迟到总比没有好！

Answer 4

可能有另一种方式......

如果在段落内有两个带有文本的跨度，其中一个跨度将位置设置在段落的左上角，那么两个跨度将重叠。现在将上跨度的高度设置为文本的大约line-height，将overflow设置为隐藏，这样只能看到跨度的第一行。在上跨度上将text-transform设置为大写，并且您将第一行设置为大写。

此解决方案的缺点是，大写文字较宽，因此下一行可能会丢失单词。您可以使用字体解决此问题，或尝试在两个跨度上设置letter-spacing，以便大写和小写文本的宽度相同。

fixed-width，虽然有时候更改窗口大小时不理想，但可能就足够了。

Answer 5

在Chrome中似乎无论如何都无法正常工作。在I.e.文本转换有效。我没有用Firefox来测试。

http://jsfiddle.net/vJSeq/4/ - 使用文字装饰

http://jsfiddle.net/vJSeq/3/ - 使用文字转换

您可以看到选择器是正确的，因为它已突出显示。

我的建议是通过在段落内创建一个span标签并为其分配一个类来使用某些内容来分隔您想要突出显示的文本

<p id="firstp">to stop the degradation of the planet's natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
​

和css

.makeupper
{
  text-transform: uppercase;  
}

http://jsfiddle.net/vJSeq/5/

Answer 6

您可能想要使用：

font-variant: small-caps;

在我看来它看起来更好，并且在所有主流浏览器中都受到支持。

更多信息

http://en.wikipedia.org/wiki/Small_caps