使用::first-line伪元素可实现段落首行加粗,p::first-line { font-weight: bold; } 仅对块级元素第一行文本生效,不影响其他内容,支持现代浏览器。

要实现CSS段落首行字体加粗,可以使用 ::first-line 伪元素配合 font-weight 属性来完成。这个方法不会影响段落中的其他内容,只对第一行文本起作用。
1. 使用 ::first-line 伪元素
::first-line 是一个CSS伪元素,用于选中块级元素的第一行文本。结合 font-weight,可以让首行文字变粗。
p::first-line {
font-weight: bold;
}
这样,所有 段落的第一行都会自动加粗显示。
2. 注意事项和限制
使用 ::first-line 时需注意以下几点:
立即学习“前端免费学习笔记(深入)”;
- 只能应用于块级元素(如 p、div、h1 等)
- 仅对文本内容的第一行生效,不包括图片或内联元素的布局影响
- 部分CSS属性在 ::first-line 中可用,font-weight 是其中之一
- 浏览器会根据当前容器宽度决定“第一行”包含哪些文字
3. 实际示例
这是第一行的文字内容,它将会被加粗显示。 这是第二行的内容,不会受到影响,保持正常字重。
p::first-line { font-weight: bold; color: #333; }
在这个例子中,只有“这是第一行的文字内容,它将会被加粗显示。”这部分加粗,换行后的文字保持原样。
基本上就这些。使用 ::first-line 是实现段落首行加粗简单且标准的方式,适用于大多数现代浏览器。










