CSS3文本

本文整理了CSS3文本的文本的各大属性、文本阴影、文本溢出、文本换行等，需要辅助以实战练习才能很好的理解与使用其中的属性。

1.CSS3文本简介：

css在文本功能上主要分为三大类：字体、文本、颜色！

字体类型（6种属性）：

• font-family：字体类型
• font-style：字体样式
• font-weight：字体粗细
• font-size-adjust：是否强制对文本使用同一尺寸，更换字体类型的时候作用大！
• font-stretch：是否横向拉伸便变形字体
• font-variant：字体大小写

符合属性：font

font:font-style font-weight/line-height font-family;

文本类型（11个属性）：

• word-spacing：词与词之间的间距
• letter-spacing：字符之间的间距
• vertical-align：文本的垂直对齐方式
• text-decoration：文本的修饰线
• text-align：文本水平对齐方式
• text-indent：文本首行缩进
• text-transform：文本大小写
• text-shadow：文本阴影效果
• line-height：文本行高
• white-space：文字之间和文本之间的空白符间距
• direction：控制文本流入的方向

上面文本类型的11个属性请自行了解：http://www.w3school.com.cn/
除了文字和文本类型之外，还包含一个颜色属性color，主要用来设置文本的颜色。

---

2.CSS3文本阴影属性:text-shadow

text-shadow:color x-offset y-offset blur-radius,*;//支持多阴影

filter:shadow(colr=颜色值,direction=数值,strength=数值)//IE滤镜兼容，direction设定投影的方向，角度单位；strength为阴影强度，类似于模糊半径！

注意：文本阴影是不占文档空间的，不会改变元素的盒子尺寸，但可能会延伸到边界之外。

多阴影效果应用：燃烧字、浮雕字、文本描边等

精彩看博文：http://www.w3cplus.com/blog/52.html

---

3.文本溢出:text-overflow

text-overflow:clip||ellipsis;

text-overflow用于实现文本溢出时裁切文本显示省略标记(…)效果，此外，还需要两个属性的配合：white-space:nowrap;和overflow:hidden;并且还需要容器的宽度。

p.textOverflow{
      height:200px;
      /*配合两个属性和给定宽度*/
      width:300px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;

    }

---

4.文本换行:

//实现长单词与URL地址的自动换行
word-wrap:normal|break-word;

normal：默认值；只在半角空格或连字符的地方进行换行；
break-word:将内容在边界内换行(截断英文单词换行)

//此属性的兼容性不好，在各大浏览器上存在一定的效果差异！
word-break:normal|break-all|keep-all;

normal:默认值，依语言自己的规则确定换行方式，中文在边缘汉字换行，英文从整个单词换行。
break-all:强行截断英文单词，词内换行效果。
keep-all:不允许字断开。

//处理文本间多余的空白
white-space:normal||pre||nowrap||pre-line||pre-wrap||inherit;

normal:默认值。浏览器自动忽略空白处。
pre:文本空白处会被浏览器扣留。
nowrap:文本不会换行，文本会在同一行上。
pre-line:合并空白符序列，但保留换行符
pre-wrap:保留空白符序列，但正常进行换行
inherit：继承父元素的white-space属性值

5.控制文本流入的方向:direction

需要两个属性同时配合才能改变文本流入的方向，文本也会靠父容器右侧开始倒序输出！

• direction:rtl;
• unicode-bidi:bidi-override;

    //单单只是direction:rtl;文本知识类似于“浮动”到父容器的右边，文本流入方向不变
    direction:rtl;
    //配合unicode-bidi属性可以控制文本流入的方向
    direction:rtl;
    unicode-bidi:bidi-override;
    //原文本，靠左显示
    这是从左到右的文字！
    //控制后的文本流入方向改变，靠右显示
    这是从左到右的文字！

6.文本描边：-webkit-text-stroke

.blackandwhite{
    font-family: '微软雅黑';
    font-size:3em;
    color: green;
    text-align: center;
    -webkit-text-fill-color: #fff;//字体填充色，否则默认color
    -webkit-text-stroke: 2px black;描边样式
}

注意：只在webkit内核支持！其他类型浏览器则看不到描边效果，默认color颜色字体！