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>

由于你的字符串全部大写，你不能单独使用CSS，而不需要在<span>标记中单独包装每个单词，但是JS可以做到这一点：

＆＃13;

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(' ');
});

＆＃13;

<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>

＆＃13;

Answer 2

text-transform: capitalize

是你想要的。

编辑：如果您的初始字符串全部为大写，则可能必须首先使用javascript将其设为小写...

Answer 3

嗯，这是一个直截了当的答案：

将输入文本传递到javascript函数下面的getCapitalize，它将返回预期的输出 -

＆＃13;

var text = $(".capitalize").text();

var formattedText = getCapitalize(text); // use of function

$(".capitalize").text(formattedText);  // assign formatted text the container


 
function getCapitalize(text){  //formatter function
  
     var textArray = text.split(" ");

     for(i= 0; i<textArray.length; i++){
  
     textArray[i] = textArray[i][0].toUpperCase() + textArray[i].substr(1).toLowerCase();

     }
     return textArray.join(" ");      
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="capitalize">HELLO I AM HERE.</p>

＆＃13;

希望这会对您有所帮助：）

Answer 4

您可以轻松使用此代码。

$(document).ready(function(){
		$( "p.tolower" ).each(function( index ) {
			var text= $(this).text().toLowerCase();
			$(this).html(text);
		});});

p.tolower{text-transform: capitalize;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='tolower'>HELLO I AM HERE</p>
<p class='tolower'>HELLO I AM HERE AGAIN</p>
<p class='tolower'>HELLO I AM HERE AGAIN AND AGAIN</p>

在CSS中用空格和第一个字母后出现的句子中设置首字母大写

4 个答案: