如何仅在换行时用CSS大写第二行首字母？无需JavaScript

背景与需求 #

我通过给<span>设置display: inline-block来拆分长文本，代码如下：

CSS 代码 #

.line {
  display: inline-block;
}

HTML 代码 #

<p>
  <span class="line">This text should break</span>
  <span class="line">after the word "break"</span>
</p>

我需要实现的效果：

• 当文本不换行时，显示为：

This text should break after the word "break"

• 当文本换行时，第二部分的首字母自动大写，显示为：

This text should break
After the word "break"

尝试过的无效CSS写法 #

我试了下面几种CSS写法，都达不到预期效果：

.line:not(::first-line)::first-letter {
  text-transform: uppercase;
}

.line::first-letter {
  text-transform: uppercase;
}

.line::first-line {
  text-transform: none !important;
}

.line::first-letter {
  text-transform: uppercase;
}

.line::first-line::first-character {
  text-transform: none !important;
}

请问不使用JavaScript是否可以实现该需求？

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