前加粗、之后恢复常规字重
" />
本文介绍一种纯 CSS 方案，利用 ::first-line 伪元素精准控制换行前后的字体粗细，无需修改 HTML 结构，适用于动态文本场景。
本文介绍一种纯 css 方案，利用 `::first-line` 伪元素精准控制换行前后的字体粗细，无需修改 html 结构，适用于动态文本场景。
在实际开发中，我们常遇到 HTML 结构受限（如 CMS 输出、第三方组件封装）而无法添加额外标签的情况。例如以下不可修改的 HTML 片段：
<div class="html-input goto-card-label">Header <br> Subtitle</div>
若直接对 .goto-card-label 设置 font-weight: bold，整段文字（包括 <br> 后的 “Subtitle”）都会加粗——这与需求相悖。
正确解法是放弃“按 DOM 节点分割样式”的思路，转而采用基于视觉行盒（line box）的布局逻辑：
CSS 的 ::first-line 伪元素会匹配块级容器中第一行文本所形成的行盒，而 <br> 会强制换行，因此 <br> 之前的内容自然属于第一行，之后的内容则位于第二行及后续行。
只需覆盖原有全局加粗规则，改为仅对首行加粗即可：
.goto-card-label {
font-weight: normal; /* 重置为默认，避免继承干扰 */
}
.goto-card-label::first-line {
font-weight: bold;
}
✅ 效果说明：
- “Header” 位于第一行 → 加粗；
-
<br>换行后，“Subtitle” 位于第二行 → 继承父级font-weight: normal，呈现常规字重。
⚠️ 注意事项：
-
::first-line仅对块级容器生效（div默认符合），且仅影响可渲染的文本内容，不作用于<br>本身； - 该方案依赖浏览器对换行的行盒划分，因此要求
<br>是唯一换行触发方式（不混用white-space: pre-wrap等可能影响行盒生成的属性）； - 不支持“多段
<br>分隔并分别设置不同样式”，因为::first-line仅作用于第一行，后续行需通过其他方式（如::nth-line()）——但该伪类尚未被主流浏览器支持，故当前方案仅适用于「单次<br>分隔」场景。
? 总结：
这是典型的“以布局逻辑替代结构逻辑”的 CSS 巧用案例。当 HTML 无法变更时，善用 ::first-line 可优雅解决换行前后样式差异化问题，兼具兼容性（Chrome/Firefox/Safari/Edge 全支持）与简洁性，是现代 CSS 实践中的实用技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
