段落中每个单词的首字母样式

问题描述：

我正在尝试使用CSS为段落的第一个字母设置样式，并希望使用greensock添加一些动画，但是实际上要求是为每个单词的第一个字母(而不只是第一个字母段落)设置样式.

I am trying to style the first letter of a paragraph using CSS and wanted to add some animation using greensock, But actually the requirement is to style the each word's first letter not just the first letter paragraph.

对此有何建议/想法?

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

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

更新，我尝试通过以下方式进行处理(添加span标签并定位每个span的第一个元素)，但是它不起作用:

UPDATE I tried handling the following way (adding span tag and targeting first element of each span) but it doesn't work:

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

答

与用于创建数组形式字符串和 forEach() 迭代每个单词.然后中的剪切单词的第一个字母，然后添加span.并使用span

use with split(" ") for create the array form string and forEach() is iterate the each word. Then slice(0,1) the cut first letter of the word then append with span .And add the css effect with span

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>

段落中每个单词的首字母样式

相关推荐