如何通过使用CSS将大写字母转换为小写和大写字母大写,如下所示?
发件人: 这是一个例子句子。
要 这是一个例句。
更新 当我使用text-transform:capitalize; 结果仍然相同。
答案 0 :(得分:78)
CSS中没有句子大写选项。建议text-transform: capitalize
的其他答案不正确,因为该选项会大写每个单词。
如果您只希望每个元素的第一个字母为大写,那么这是一种粗略方式来完成它,但它肯定远不及实际的句子上限:
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: uppercase;
}
<p>THIS IS AN EXAMPLE SENTENCE.</p>
<p>THIS IS ANOTHER EXAMPLE SENTENCE.
AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.</p>
答案 1 :(得分:14)
您将无法使用CSS将每个句子的第一个单词大写。
CSS为大写提供text-transform
,但它仅支持capitalize
,uppercase
和lowercase
。这些都不会做你想要的。您可以使用选择器:first-letter
,它将任何样式应用于元素的第一个字母 - 但不会应用于后续字母。
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: capitalize;
}
<p>SAMPLE TEXT. SOME SENTENCE. SOMETHING ELSE</p>
<!-- will become this:
Sample text. some sentence. something else. -->
这不是你想要的(并且:第一个字母不是跨浏览器兼容的......再次IE)
做你想要的唯一方法是使用一种编程语言(服务器端或客户端),如Javascript或PHP。
在PHP中你有ucwords
函数(documented here),就像CSS大写每个单词的每个字母一样,但做一些编程魔术(查看文档的注释以供参考),你就可以了实现每个句子每个首字母的大写。
更简单的解决方案,你可能不想做PHP就是使用Javascript。请查看以下页面 - Capital Letters - 了解完全按照您的意愿执行的完整Javascript示例。 Javascript很短,并且通过一些字符串操作进行大写 - 您可以根据需要调整capitalize-sentences.js
。
无论如何:资本化通常应该在内容本身中完成,而不是通过Javascript或标记语言。考虑用其他方法清理您的内容(您的文本)。例如,Microsoft Word内置了可以满足您需求的功能。
答案 2 :(得分:6)
使用JS ..将元素的textContent转换为小写。
el.textContent = el.textContent.toLowerCase();
然后只使用css ..
text-transform: capitalize;
答案 3 :(得分:3)
如果您要使用<input>
,则无法使用,<input>
或文字区域需要使用Javascript
<script language="javascript" type="text/javascript">
function capitaliseName()
{
var str = document.getElementById("name").value;
document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1);
}
</script>
<textarea name="NAME" id="name" onkeydown = "capitaliseName()"></textarea>
应该适用于<input>
或<textarea>
答案 4 :(得分:0)
你不能纯粹用CSS做到这一点。有一个text-transform
属性,但它只接受none
,capitalize
,uppercase
,lowercase
和inherit
。
您可能希望查看JS解决方案或服务器端解决方案。
答案 5 :(得分:0)
只需使用
即可使用css代码:text-transform:uppercase;
答案 6 :(得分:0)
我知道OP正在寻求一个仅限CSS的解决方案。但是如果从魔术谷歌到这里的任何人最终都需要一个JavaScript解决方案,那么这是一个单行:
capitalize = str => str[0].toUpperCase() + str.substr(1);
e.g:
capitalize('foo bar baz'); // -> 'Foo bar baz'
答案 7 :(得分:0)
使用mixins
@mixin sentence-case() {
text-transform: lowercase;
&:first-letter {
text-transform: uppercase;
}
}
// USAGE:
.title {
@include sentence-case();
}
&#13;
答案 8 :(得分:-1)
如果您可以使服务器上的所有字符都小于您可以应用的字符:
text-transform: capitalize
我认为text-transform不会以大写字母作为输入。
答案 9 :(得分:-1)
如果在大写文本上使用它;
p text-transform: lowercase;
然后显示文本,它是小写但如果你复制那个较低的文本,并粘贴它,它会改回原来的大写。
答案 10 :(得分:-1)
可以简单地在元素中使用样式
<p style="text-transform: lowercase;">HI I AM NEW HERE</p>
答案 11 :(得分:-3)
<强>简单:强>
text-transform: capitalize;