Question

<h2>AUTHOR NAME </h2>

我喜欢将第一个单词的第一个字母（A）和最后一个单词的第一个字母（N）作为目标而不使用任何跨度或类别。我怎么能这样做？

Answer 1

你不能使用CSS来做，但jQuery只需几行即可完成。如果您希望每个（第一个）字母作为对象中的元素，那么map()方法如何：

letters = $.trim($('h2').text()).split(' ').map(function(v){
    return v.substring(0,1);
});

JSFiddle

或者如果你想将这些字母包裹在一个范围内（可能是样式）：

letters = $.trim($('h2').text()).split(' ').map(function(v){
    fl = v.slice(0,1);
    return '<span>'+fl+'</span>'+v.slice(1,v.length);
}).join(' ');

letters将包含HTML格式的字符串。

JSFiddle

Answer 2

我不确定你可以选择第二个单词的第一个字母，但是你可以通过first-letter选择第一个字母

<强> Working Demo

<强> CSS

h2:first-letter {
    color:red;
    font-size:35px;
}

你可以通过jQuery

来做

<强> See this Demo

$(document).ready(function() {
    var words = $('h2').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('h2').html(html);
});

取自其他SO Question并由Ajma

回答

Answer 3

简单来说......用css是不可能的。你将需要帮助javascript来解决这个限制，事实上使用javascript非常容易

Answer 4

W3C specification只有first-letter个伪类。因此，您需要将字母包装在单个标记中，例如span。

CSS伪选择器

4 个答案: