段落中每个单词的首字母样式 [英] Style first letter of each word in paragraph

问题描述

我正在尝试使用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>

这篇关于段落中每个单词的首字母样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！