揭秘CSS(第 1 版)
3.2.8 文本转换
阅读(

概述

CSS选择器

字体和文本

字体

文本

单词间距

字符间距

垂直对齐

行高

水平对齐

水平对齐

文本缩进

文本转换

英文字母的大小写转换,是CSS提供的非常实用的功能之一,文本的大小写转换在空格处理之后进行。文本转换对中文无效,因为中文不存在大小写。

在CSS中,使用 text-transform属性来对文本进行大小写转换,取值为 none | capitalize | uppercase | lowercase | full-width,默认为 none。

none 表示无转换,保持原样;capitalize 表示将每个单词的首字母转换成大写,其它字符不变;uppercase 表示将文本的所有字符转换成大写;lowercase 表示将文本的所有字符转换成小写;full-width 表示将所有字符转换成全角形式(全角占两个字节,半角占一个字节),如果字符没有全角形式,将保持原样,其典型用途是将拉丁字符及数字排版为表意字符形式。如:

假设使用 text-transform属性,定义了四种不同的文本转换类型。如:

.capitalize  {
   text-transform: capitalize;
}
.uppercase  {
   text-transform: uppercase;
}
.lowercase  {
   text-transform: lowercase;
}
.full-width  {
  text-transform: full-width;
}

把上述四种文本转换类型,应用到特定的文本,即可实现相应的文本转换特效。如:

<p class="capitalize">text-transform: capitalize</p>
<p class="uppercase">text-transform: uppercase</p>
<p class="lowercase">text-transform: lowercase</p>
<p class="full-width">text-transform: full-width</p>

由于不同的浏览器,对单词的理解可能不同。比如,对于文本“text-transform”,Google Chrome浏览器会把它整体看作一个单词,而Firefox浏览器把它看作是“text”和“ransform”两个单词,中间用连字符连接。

因此,在 text-transform属性取值为 capitalize 时,在Google Chrome中得到的结果是 “Text-Transform”,而在Firefox中得到的结果是“Text-transform”。而CSS规范并没有明确规定使用哪一种转换方式,所以它们都是正确的结果。

此外,取值 full-width 是CSS3的新增的属性值,目前仅得到Firefox浏览器的支持。上述代码在Firefox浏览器下的运行效果如图 3‑20 所示:

text-transform属性效果
图3-20 text-transform属性效果

使用 text-transform属性的好处是,如果你需要将哪些元素变成大写,则无需修改元素的内容,只需使用CSS就可以完成。这也是CSS优越性的再一次体现。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验