Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

使用split(" ")创建数组表单字符串，forEach()迭代每个单词。然后slice(0,1)剪切该单词的第一个字母，然后附加span。并添加带有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>

Answer 2

＆＃13;

const p = document.getElementById('text')

const styleMe = l => '<span class="styled">' + l + '</span>'

const newS = p.innerText.split(' ').map(w => w.split('').map((l,i) => (i === 0) ? styleMe(l) : l).join('')).join(' ')

p.innerHTML = newS

＆＃13;

.styled {
  color:red
}

＆＃13;

<p id="text">Hello This Is The Title</p>

＆＃13;

Answer 3

没有css第一词css选择器。所以你可以用jquery来实现这个目的。

解决方案1：仅设置段落的第一个单词的样式。

＆＃13;

$(function() {
    $('p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

＆＃13;

.firstWord{ color:red; font-size:20px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling the first word of pragraph.</p>

＆＃13;

解决方案2：为段落行的每个首字母设置样式

＆＃13;

$(document).ready(function() {
    var words = $('p').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('p').html(html);
});

＆＃13;

.firstLetter{ color:red; font-size:20px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling each  first letter of the word in  pragraph.</p>

＆＃13;

Answer 4

您正在寻找的是一个不存在的伪元素。有：第一个字母和：第一行，但没有：第一个字母 - 每个字。

最简单的选择是将每个单词的第一个字母包裹在<span>中。另一种选择是尝试使用javascript解决方案。

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

4 个答案: