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

Question

我要求在每一行中突出显示第一个字符，如下图所示，所有内容都在单个段落中，基于分辨率更改也应该表现相同，

我试过使用弹性框，第一个小孩也使用脚本，我无法找到解决方案

任何帮助将不胜感激。

Answer 1

试试这个：

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

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

修改 好的，因为你需要在一个paragrpah中的每一行，所以你必须使用脚本。

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>

Answer 2

CSS仅响应式解决方案，使用mix-blend-mode，IE和Edge不支持。

我们的想法是使用具有固定宽度（最大字母宽度）和mix-blend-mode: screen;的彩色叠加层，以仅为每行的第一个字母着色。

您需要使用等宽字体，因此如果第一个字母很窄，颜色将不会溢出到下一个字母。

p {
  position: relative;
  font-family: monospace; /** to have constant character width **/
  font-size: 28px;
  background: white;
}

p::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: red;
  mix-blend-mode: screen;
  pointer-events: none; /** to enable selected of the text under the pseudo element **/
  color: transparent; /** to hide the character **/
  content: 'W'; /** a character in your font to use as width **/
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis euismod orci. Morbi ullamcorper augue ipsum, at consectetur turpis dictum sed. Phasellus bibendum tellus eu aliquet congue. Morbi ultrices aliquam purus, id semper diam aliquet eget. Nulla
  at tellus lacus. Curabitur massa lectus, auctor et lobortis vel, sodales non diam. Pellentesque gravida tortor ac ex porta congue. Ut vestibulum arcu ex, ac lacinia tortor pulvinar id. Nulla sagittis, lectus at luctus dignissim, orci nulla interdum
  ex, at euismod nibh ipsum et lacus. Suspendisse potenti. Quisque ac eros nunc. Suspendisse sit amet dolor diam. Phasellus blandit commodo mi, at aliquam mi facilisis ut. Vestibulum lacinia enim tempor nunc elementum suscipit. Praesent ligula ipsum,
  venenatis et tellus at, imperdiet tempus lectus. Pellentesque consequat magna augue, at vestibulum sem facilisis nec.</p>

Answer 3

尝试这种方法（可能不是最好的但它可以正常工作）：

＆＃13;

＆＃13;

var content = document.getElementById('content').innerHTML
var doYourThing = function(){
  var formattedContent = content.replace(/(\w)/g,'<span>$1</span>')
  document.getElementById('formatted').innerHTML = formattedContent

  var characters = document.getElementsByTagName('span')
  var refPosition = characters[0].getBoundingClientRect().left

  for (character of characters){
    if(character.getBoundingClientRect().left <= refPosition){
      character.style.textTransform = "capitalize"
      character.style.color = "red"
    }
  }
}
doYourThing()
window.onresize = doYourThing

＆＃13;

<p id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nisi minima veritatis ipsa magnam culpa ipsam dolores. Deserunt rerum, quod unde consequatur consectetur harum omnis sequi, voluptatum quaerat quasi illo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, esse, repellendus sed voluptate facere magni quis beatae corrupti odio id! Labore voluptatem soluta harum esse, at atque deserunt nesciunt ipsa.
</p>
<p id="formatted" style="background-color:#fee"></p>

＆＃13;

＆＃13;

＆＃13;

自定义它以满足您的需求。祝好运。 JSFiddle

Answer 4

简单方法

实现此结果的一种简单方法是split("\n")获取所有行，然后用自身替换每行的第一个字母，用<span>包含适当的类，最后{{1这些行并将它们放在原始父元素中。

＆＃13;

＆＃13;

join("<br/>")

＆＃13;

var lines = document.querySelector("p").innerHTML.split("\n");
for(var key in lines)
 lines[key] = "<span class='first-letter'>" + lines[key].substr(0, 1) + "</span>" + lines[key].substr(1);
document.querySelector("p").innerHTML = lines.join("<br/>");

＆＃13;

span.first-letter {
  font-weight: bold;
  color: red;
}

＆＃13;

＆＃13;

＆＃13;

替代（语义正确）方式

另一种选择是<p>This is a line This is another line This is yet another line</p>和以前一样，但实际上用split("\n")标签中的每一行替换自己。然后<p>行，并用行本身替换原始父级。这使用join() CSS伪元素来设置这些类的样式，并且在语义上比前一个更正确。

＆＃13;

＆＃13;

::first-letter

＆＃13;

var lines = document.querySelector("p").innerHTML.split("\n");
for(var key in lines)
 lines[key] = "<p>" + lines[key] + "</p>";
document.querySelector("p").outerHTML = lines.join("");

＆＃13;

p::first-letter {
  font-weight: bold;
  color: red;
}
/* This is a quick fix to make paragraphs display same as if the were all part of the same one, alter this based on your page's style and your needs. */
p + p {
  margin-top: -16px;
}

＆＃13;

＆＃13;

＆＃13;