CSS首行文字加粗的实现方法

想让段落首行文字自动加粗，又不影响后续内容？只需一行CSS代码——`p::first-line { font-weight: bold; }`，利用标准的`::first-line`伪元素精准控制块级元素的第一行文本，兼容现代浏览器、无需JavaScript、不干扰排版，轻松实现专业级的视觉层次效果。

要实现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>
  这是第一行的文字内容，它将会被加粗显示。
  这是第二行的内容，不会受到影响，保持正常字重。
</p>

p::first-line {
  font-weight: bold;
  color: #333;
}

在这个例子中，只有“这是第一行的文字内容，它将会被加粗显示。”这部分加粗，换行后的文字保持原样。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~