Question

我正在尝试使用jQuery，CSS或PHP来增加字符串中每个单词的第一个字母的字体大小。例如，我将在h1标签中有一个标题，如：

<h1>The title of this page goes here</h1>

我想将所有文本的文本转换为大写（CSS没有问题），但随后增加字符串中出现的第一个字母的字体大小。使用CSS或jQuery，有没有办法选择每个单词的第一个字母并进行修改？

Answer 1

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

以下是其中的一个示例：http://jsfiddle.net/hCvsu/1/

Answer 2

我无法让:first-letter工作，但这是一个可能的解决方案，假设<h1>不包含其他标签或实体：

$('h1').html(function(i,html){
    return html.replace(/(\S)(\S*)/g, '<span class="FirstLetter">$1</span>$2');
});

CSS：

.FirstLetter {color:green}

这可能带来的好处是，这应该适用于所有浏览器正则表达式非常简单：\S代表非空白字符。它逐字逐句匹配并捕获第一组（$1）中每个单词的第一个字母，以及第二组中的其余字母（$2），以便于替换。

工作示例：http://jsbin.com/ufovi4

Answer 3

最简单的方法可能只是直接的CSS，虽然它会为你创建一些额外的标记。但是，JQuery最终会产生相同数量的额外标记，但需要额外的开销，并且在没有JS支持的情况下会失败。 h1.dropcaps div { 向左飘浮; } h1.dropcaps div：first-letter { font-size：300％; font-weight：bold; }

<h1 class="dropcaps"><div>Your</div> <div>text</div> <div>here</div>

<强>更新事实证明：在某些浏览器中，第一个字母在内联元素中不起作用。

解决这个问题的技巧是将它们放在div中，然后浮动div。我修改了我的标记。 http://jsfiddle.net/MBZaw/

Answer 4

如果页面中只有一个h1，则Ajma解决方案可以正常工作。

这适用于所有h1：

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

可能的改进：不是带样式的跨度，而是使用类创建跨度并使用字体大小：CSS中的200％。

可能出现的问题：如果你的h1包含其他标签（它不应该！）那些标签会丢失，只保留文字。

希望它有所帮助，西蒙

Answer 5

Here is the JSfiddle

var h1 = $('h1'),
    words = h1.html().split(' '),
    withCaps = '';
for (var i = 0; i < words.length; i++)
    withCaps += '<span>' + words[i].substring(0, 1).toUpperCase() + '</span>' + words[i].substring(1) + ' ';

h1.html(withCaps);

Answer 6

这会奏效。只需将CSS设置为h1 span {font-size: 125%}，或其他任何内容。

$('h1').each(function(){
    var $this = $(this);
    var words = $this.text().split(' ');
    var newHtml = '';
    for (var i = 0; i < words.length; i++) {
         newHtml += '<span>' + words[i].substring(0, 1) + '</span>' + words[i].substring(1) + ' ';
    }
    $this.html(newHtml);
});

更改每个单词的第一个字母的值

6 个答案: