Question

在浏览器中打开时显示：“这是第一句。这是第二句。这是第三句。这是结束。” 我想要 “这是第一句。这是第二句。这是第三句。这是结束。”资本在每个点之后。

Answer 1

如果不修改HTML，只能使用CSS来实现您想要实现的目标。根据你的代码，你告诉CSS将div的第一个字母转换为大写，这正是它正在做的事情。实现目标的简单方法是执行以下操作：

<html> 
<head> 
    <style>  
        span {display: inline-block; text-transform:lowercase} 
        span:first-letter {text-transform:uppercase}
    </style> 
</head> 
<body > 
    <div > 
        <p>
            <span>THIS IS FIRST SENTENCE.</span><span>THIS IS SECOND SENTENCE.</span><span>This Is Third Sentence.</span><span> this is end.</span> 
        </p>
    </div> 
</body> 
</html>

请注意，您无法将伪选择器:first-letter应用于内联元素，因此您必须在CSS中指定display: inline-block。我希望这有帮助！

修改：由于您不希望在HTML中包含任何额外的标记，因此您需要使用Javascript。为此，我将使用jQuery并假设以下HTML：

    <html> 
<head> 
    <style>  
        div{text-transform:lowercase} 
    </style> 
</head> 
<body > 
    <div id="myDiv"> 
         This is first sentence. this is second sentence. this is third sentence. this is end.
    </div> 
</body> 
</html>

之后，插入一个<script>标签，其功能如下：

<script>    
function sentenceCase(input, lowercaseBefore) {
        input = ( input === undefined || input === null ) ? '' : input;
        if (lowercaseBefore) { input = input.toLowerCase(); }
        return input.toString().replace( /(^|\. *)([a-z])/g, function(match, separator, char) {
        return separator + char.toUpperCase();
    });
}
</script>

然后，要使用它，您需要将div内容分配给变量，如下所示（在<script></script>标记中包含此代码段：

var content = $('#mydiv').text(); //You assign 'This is first sentence. this is second sentence. this is third sentence. this is end.' to content
content = sentenceCase(content);
$('#mydiv').text(content);

Answer 2

在div上添加一个类，并将css元素添加到该类中。

<html> 
<head>
<style>
.para {
    text-transform: lowercase;
}
.para:first-letter {
    text-transform: uppercase;
}
</style> 
</head> 
<body > 
<div class="para"> THIS IS FIRST SENTENCE. THIS IS SECOND SENTENCE. This Is Third Sentence. this is end. </div>
</body> 
<html>

在div html中的每个点（。）之后的第一个字母大写和其他小的后者

2 个答案: