If you read the specs on the ::first-line and ::first-letter you'll see that what your looking for is impossible.
They way that these work, is that the CSSDom creates "fictional tags" like the following:
// Example
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
<P>Some text that ends up on two lines</P>
// CSSDom output
<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>
The CSSDom can't figure out where to put these "fictional tags" when you use inline elements. You need to have a single block element for these "fictional tags" to even work.
That said, even if you DID have a single block element, you still wouldn't be able to select the second line's ::first-letter because that fictional tag is wrapped inside the ::first-line, and there isn't support for ::second-line or anything beyond the first.
So, if you want to do this without JS
You're going to have to get creative, and write a lot of Media queries, and do a lot of quality assurance to make sure that your type fits nicely inside what you're trying to create.
Based on what you've shared, here's a relatively flexible, and simple version of how I'd handle these requirements.
/* 1 item on mobile */
@media (max-width: 599px) {
.line-container {
width: 20ch;
}
.line-container .line {
display: inline-block;
}
.line-container .line:first-letter {
text-transform: uppercase;
}
}
/* 2 items on Tablet */
@media (min-width: 600px) and (max-width: 1023px) {
.line-container {
width: calc(20ch * 2);
}
.line-container .line {
display: inline-block;
}
.line-container .line:nth-child(2n + 3):first-letter {
text-transform: uppercase;
}
}
/* 3 items on Desktop */
@media (min-width: 1024px) {
.line-container {
width: calc(20ch * 3);
}
.line-container .line {
display: inline-block;
}
.line-container .line:nth-child(3n + 4):first-letter {
text-transform: uppercase;
}
}
<p class="line-container">
<span class="line">This text should break</span>
<span class="line">after the word "break"</span>
<span class="line">after the word "break"</span>
<span class="line">after the word "break"</span>
<span class="line">after the word "break"</span>
<span class="line">after the word "break"</span>
<span class="line">after the word "break"</span>
</p>
