文本的大小写转换 text-transform

Docs

text-transform - CSS | MDN (mozilla.org)

text-transform CSS 属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

• text-transform 用于设置文字的大小写转换。
  • Transform 单词是使变形/变换(形变)；
• text-transform 有几个常见的值：
  • capitalize：(使…首字母大写，资本化的意思) 将每个单词的首字符变为大写；其他的字符保留不变（它们写在元素里的文本保留原始大小写）。字母是 Unicode 字符集或者数字里定义的字符；因此单词开头的任何标点符号或者特殊符号将会被忽略。
  • uppercase：(大写字母) 将每个单词的所有字符变为大写；
  • lowercase：(小写字母) 将每个单词的所有字符变为小写；
  • none：阻止所有字符的大小写被转换，没有任何影响；
• 实际开发中用 JavaScript 代码转化的更多。

HTML

<p class="tranformnone">
  <span class="keyword">text-transform: none; Σ IS A greek LETTER. →</span> Σ IS A greek LETTER.
</p>
<p class="capitalize1">
  <span class="keyword">text-transform: capitalize; Σ IS A greek LETTER. →</span> Σ IS A greek LETTER.
</p>
<p class="capitalize2">
  <span class="keyword">text-transform: capitalize; initial symbols are ignored. →</span> initial symbols are
  ignored.
</p>
<p class="lowercase">
  <span class="keyword">text-transform: lowercase; Σ IS A greek LETTER. →</span> Σ IS A greek LETTER.
</p>
<p class="uppercase">
  <span class="keyword">text-transform: uppercase; Σ is a greek letter. →</span> Σ is a greek letter.
</p>

CSS

.keyword {
  font-weight: bold;
  background-color: silver;
  color: darkgreen;
  text-transform: none;
}

.tranformnone {
  text-transform: none;
}

.capitalize1 {
  text-transform: capitalize;
}

.capitalize2 {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

http://localhost:3000/text-tranform.html

text-transform: none; Σ IS A greek LETTER. → Σ IS A greek LETTER.

text-transform: capitalize; Σ IS A greek LETTER. → Σ IS A greek LETTER.

text-transform: capitalize; initial symbols are ignored. → initial symbols are ignored.

text-transform: lowercase; Σ IS A greek LETTER. → Σ IS A greek LETTER.

text-transform: uppercase; Σ is a greek letter. → Σ is a greek letter.