css text-transform几乎没有什么用途
2017-01-19 17:37

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

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


@2:uppercase

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

效果如下:

uppercase.png

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>

效果如下:

lowercase.png

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的效果如下:

nofullwidth.png

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

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

效果如下:

fullwidth.png

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

结语

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

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2261)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1