仅用CSS实现文本换行时最后单词单独设置不同样式可行吗？

这里有个非常巧妙且简洁的方案，利用CSS的伪元素特性就能完美实现你的需求：

核心思路 #

利用::first-line伪元素的特性——它只会选中元素内的第一行文本。当标题能在一行完整显示时，所有文本都属于第一行，会应用粗体样式；当窗口缩小导致最后一个单词换行到第二行时，只有第一行的文本保持粗体，第二行的单词会使用默认的正常字体权重。

代码实现 #

假设你的HTML结构是这样的：

<div class="short-title">Hello World</div>

对应的CSS代码：

.short-title {
  font-weight: normal; /* 默认字体权重设为正常 */
  /* 可选：让容器宽度自适应内容，避免不必要的换行 */
  width: fit-content;
}

.short-title::first-line {
  font-weight: bold; /* 给第一行文本设置粗体 */
}

效果说明 #

• 当窗口宽度足够时，两个单词在一行显示，::first-line会选中全部文本，整个标题保持粗体；
• 当窗口缩小到需要换行时，最后一个单词单独跑到第二行，此时::first-line仅作用于第一行的第一个单词，第二行的单词自动恢复为正常字体权重，完全符合你的要求！

这个方案的优势是完全动态响应，不需要手动设置媒体查询断点（毕竟不同设备、不同字体下的换行断点很难统一），纯靠CSS特性实现自适应。

内容的提问来源于stack exchange，提问作者saomi