html - 通过CSS将空格和第一个字母后面出现的句子中的第一个字母变成大写

Question

我想更新输出中的字母大小写。我有这种类型的输入字符串:

输入:

<style>
p {
    text-transform: lowercase;
}

p:first-letter {
    text-transform: uppercase;
}
</style>


<p>HELLO I AM HERE</p>

电流输出

Hello i am here

所需输出:

Hello I Am Here 

CSS 不适合我。

Answer 1

<p>HELLO I AM HERE</p>

由于您的字符串全部大写，因此如果不将每个单词繁琐地包装在 <span> 中，您实际上无法仅使用 CSS 来完成此操作。标签，但 JS 可以做到这一点:

var nodes = document.querySelectorAll('.test');

Array.prototype.forEach.call(nodes, function(node) {
  node.textContent = node.textContent.split(' ').map(function(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
  }).join(' ');
});

<p class='test'>HELLO I AM HERE</p>
<p class='test'>HELLO I AM HERE AGAIN</p>
<p class='test'>HELLO I AM HERE AGAIN AND AGAIN</p>