设置段落中每个单词的第一个字母

Question

我正在尝试CSS使用greensock来设置段落的第一个字母并想要添加一些动画,但实际上要求的是设置每个单词的第一个字母而不仅仅是第一个字母段落.

关于这个的建议/想法是什么？

p{
  font-size:150%;
  color:#000000;
}
p::first-letter {
  font-size: 200%;
  color: #ff0000;
}

<p>Hello This Is The Title</p>

更新我尝试处理以下方式(添加span标记并定位每个范围的第一个元素)但它不起作用:

p span:nth-child(1)::first-letter {
   font-size: 200%;
   color: #ff0000;
}

Answer 1

与使用split(" ")用于创建阵列形式的字符串和forEach()是迭代的每个单词.然后slice(0,1)剪切该单词的第一个字母然后附加span.并添加带有跨度的css效果

var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
  $('p').append('&nbsp;<span>' + a.slice(0, 1) + '</span>' + a.slice(1))
})

p {
  font-size: 150%;
  color: #000000;
}

span {
  font-size: 200%;
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>