text-transform前言

text-transform是用来改变元素中的文本的大小写的，可以把文本全部大写，也可以把文本全部小写，还可以把文本中的首字母大小。它对于英文，德语，法语等字母语言能很好的优化阅读体验，但是对于中文，日文等笔画字没有任何作用。如果你是国际化的网站，可能会用到此属性，但如果只是面向国内的网站，此属性毫无用途。

text-transform用法

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

text-transform参数解析

@1：capitalize

此值的作用使得字母语言文本的单词首字母大小

.texttrans{
    text-transform: capitalize;
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
}

<div class="texttrans">
    mm webfront is a origin webfront technology self blog,in there,you can learn some useful things.
</div>

效果如下：

英文单词中的首字母都有了大写的效果，这就是capitalize的作用。

@2：uppercase

.texttrans{
    text-transform: uppercase;
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
}

效果如下：

text-transform的uppercase的作用是将所有的英文字母都做了大写处理。

@3：lowercase

.texttrans{
    text-transform: lowercase;
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
}
<div class="texttrans">
    CHINA IS A GREAT COUNTRY.<BR/>
    mm webfront is a origin webfront technology self blog,in there,you can learn some useful things.
</div>

效果如下：

text-transform的lowercase的作用是把文本中的大写字母转变成小写字母。

@4：full-width

此值的作用是使得字母能够像中文，日文一样呈块状排列。

.texttrans{
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
}

<div class="texttrans">
    mm前端 is a 基础的前端 technology self blog,在这里,you can learn some useful things.
</div>

没有使用text-transform:full-width的效果如下：

我们添加上text-transform:full-width

.texttrans{
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
    text-transform: full-width;
}

效果如下：

可以看出text-tansform的作用是把引文单词中的每个字母当作笔画文字的占位进行展示的。不过这个full-width除了火狐外，其他浏览器都不支持，所以几乎没有用武之地。

结语

text-transform对于国内几乎就是一个没有用途的属性，几乎国内的所有网站使用纯英文的没有。唯一一点可以用的地方，就是一些文章中同时出现英文的单词，可以对单词进行一些大写或小写处理。text-transform也可以用到::first-line伪类和::first-letter伪类中，用来对首行或者首字母设置特殊效果。text-transform只是对英文等字母语言的阅读处理，可能对于一些科研技术文章的网站样式中有些用途。