javascript - 使用 css 或 JS 突出显示每行的第一个字符

Question

我需要突出显示每一行中的第一个字符，如下图示例，所有内容都在单个段落中，根据分辨率变化也应该表现相同，

我试过使用 flex box，第一个 child 也使用脚本，我找不到解决方案

我们将不胜感激。

Answer 1

试试这个:

p::first-letter {
  font-weight: bold;
  color: #8A2BE2;
}

<p>Hi there</p>
<p>Color first!</p>

编辑: 好的，因为您在一个段落中的每一行都需要这个，所以您必须使用脚本来完成。

var allLines = document.querySelector("p").innerHTML.split("\n");
allLines = allLines.filter(function(x){return x !== ""}).map(function(x){
return "<span>" + x.charAt(0) + "</span>" + x.substr(1);
}).join("<br/>");
document.querySelector("p").innerHTML = allLines;

span {
  color: red;
}

<p>
TEXT
SOME MORE TEXT
</p>