现在我有一个段落，我想将整个第一行大写。我已将第一段设置为 ID“firstp”并尝试：
#firstp::first-line {
text-transform: uppercase;
}
我已经尝试过了，text-transform: capitalize但这也不起作用。这很奇怪，因为我已经设法使用#firstp:first-letter.
问问题
12588 次
6 回答
8
text-transformon:first-line现在真的有问题，请参阅此处的参考http://reference.sitepoint.com/css/text-transform
您可以使用这个名为linify https://github.com/octopi/Linify的 jquery 插件来选择第一行，然后应用text-transform: uppercase
问候，
于 2012-08-04T14:20:40.460 回答
2
我认为 Chrome 的 ":first-line" 有问题。尝试删除它并在此页面上使用 james31rock 的语法，除了在他的示例中 CSS 应该是“#firstp{...”以反映他的 HTML 中的 ID 而不是“.makeupper”。
于 2013-10-30T01:59:43.887 回答
0
为了实现这一点，您必须在正确的语法中使用以下伪元素。例子：
HTML部分：
<selection id="Welcome">
<p>Some text</p>
</section>
CSS 表：
#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}
我希望这有帮助。抱歉迟到了。我想，迟到总比没有好！
于 2013-05-29T05:15:58.853 回答
0
您可能想使用：
font-variant: small-caps;
我认为它看起来更好，并且在所有主要浏览器中都受支持。
更多信息
于 2012-08-04T15:40:42.557 回答
0
可能还有其他方法...
如果您在段落中有两个带有文本的跨度，其中一个跨度将位置设置为段落的左上角，因此这两个跨度将重叠。现在将上部跨度的高度设置为大约line-height文本的高度并overflow隐藏，这样只有跨度的第一行可见。在上部跨度上设置text-transform为大写，并且你的第一行是大写的。
此解决方案的缺点是，大写文本更宽，因此下一行可能会丢失单词。您可以通过使用固定宽度字体来解决此问题，或者尝试letter-spacing在两个跨度上进行设置，以便大写和小写文本的宽度相同。
这是 jsFiddle，虽然有时当您更改窗口大小时它并不理想，但它可能就足够了。
于 2016-05-21T14:08:43.167 回答
-1
在 Chrome 中，这两种方法似乎都不起作用。在即文本转换作品中。我没有 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;
}
于 2012-08-04T13:37:40.093 回答