CSS3 新增文本样式

　　CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补，增加了更多的属性值，来适应复杂环境中文本的呈现。

一、定义文本阴影

　　可以给文字添加阴影效果了 Shadow 影子

　　语法：

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 | none;

• • none：表示默认值，没有阴影;
  • 水平位置：表示对象的阴影水平偏移值，可为负值
  • 垂直位置：表示对象的阴影垂直偏移值，可为负值
  • 模糊距离：设置对象的阴影模糊值，不允许负值
  • 阴影颜色：设置阴影的颜色

　　　　

　　扩展：可以给 text-shadow 设置多个值，表示多阴影的文字，可以做很多的特效。

　　Demo：凹凸文字的特效

　　样式：

 div {
      color: #ccc;
      font: 700 80px "微软雅黑";
 }
 div:first-child {
    /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
      text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
 }
div:last-child {
     /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
     text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

　　结构：

 <div>我是凸起的文字</div>
  <div>我是凹下的文字</div>

二、文本换行

　　CSS3 中定义了几个关于换行的属性：

　　1、line-break

　　　　 　该属性专门负责控制日文换行

　　2、word-wrap

　　　　　该属性可以控制换行。

　　　　语法格式：

word-wrap: break-word;

　　　　取值 break-word 时，将强制换行，中文文本没有任何问题，英文语句也没问题。但是对于长串的英文不起作用。该取值控制是否断词，而不是断字符。

　　3、word-break

　　　　    该属性主要针对亚洲语言和非亚洲语言进行控制换行。

　　　　语法格式：

word-break: normal | break-all | keep-all;

• • 　　normal： 使用浏览器默认的换行规则。
  • break-all： 允许在单词内换行。（允许在任意字内断开）
  • keep-all： 只能在半角空格或连字符处换行。(主要处理英文单词)

　　4、white-space

　　　　white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容或格式化文本作用。

　　　　语法格式：

white-space: normal | nowrap | break-word;

• • 　　normal：默认处理方式，表示控制连续文本换行；
  • nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行，可以处理中文。
  • break-word：表示内容将在边界内换行。

三、定义溢出文本

　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

　　语法格式：

text-overflow : clip | ellipsis | ellipsis-word;

• 该属性的初始值为无，适用于块级元素或行内元素。
• clip：表示不显示省略标记（...），而是简单的裁切；
• ellipsis：表示当对象内文本移除时显示省略标记（...），省略标记插入的位置是最后一个字符;
• ellipsis：表示当对象文本移除时显示省略标记（...），省略标记插入的位置是最后一个词（word）.

　　　　Tips：注意一定要首先强制一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden）,只有这两个搭配使用才能实现溢出文本显示省略号的效果。

　　扩展知识：

　　　　1、webkit的css扩展方法实现多行文本

　　　　　　webkit 规定了自己的一些属性，可以做出多行文本溢出显示省略号效果。

display: -webkit-box;                 //将对象作为弹性的伸缩盒子显示
-webkit-box-orient: vertical;         //设置伸缩盒子对象内的子对象的排列方式
-webkit-line-clamp: 2;                //用该属性来限定块元素内文本显示的行数
overflow: hidden;                     // 超出内容隐藏
text-overflow:ellipsis;               //使用省略号告诉用户有内容为显示

　　　　　　使用以上的代码即可实现多行文本溢出显示省略号。

　　　　2、通用的多行文本显示省略号

　　　　　　在通用的浏览器中显示省略号，可以通过自己手动添加伪元素的方式来实现。

 　　　　.container {                      // container 为放文字的容器
             height: 30px;
             line-height: 2em;
             overflow: hidden;
             border: 1px solid red;
             position: relative;
         }
         .container::after {
             content: "...";         // 通过伪元素，手动添加省略号
             position: absolute;     // 通过定位来实现
             right:;
             bottom:;
             padding: 0 6px;
             background-color: #fff;
         }

四、添加动态内容

　　content 属性属于内容生成和替换模块，该属性能够为指定元素添加内容（这部分功能替代了原需 JavaScript 的任务）。

　　该属性能够满足样式设计中临时添加非结构性的样式服务标签，或者添加补充说明性内容等等。

　　语法格式：

content: normal | string | attr() | uri() | counter() | none;

• • 　　normal：默认值，适用于所有可用元素；
  • String：插入文本内容；
  • attr()：插入元素的属性值；
  • uri()：插入一个外部资源，如图像，音频或浏览器支持的其他任何资源；
  • counter()：计数器，用于插入排序标识；
  • none：无任何内容。

五、恢复默认样式

　　initial 该属性值可以直接取消对某个元素的样式指定。

　　Demo：

p#text2 { color:initial;}

　　   initial 属性值的作用是让各种属性使用默认值。

　　Tips：注意权重问题。

六、自定义字体类型

　　CSS3 允许用户自定义字体类型，通过 @font-face 能够加载服务器的字体文件，让客户端浏览器显示客户端没有安装的字体。

　　语法格式：

@font-face:{<font-description>}

　　  @font-face 规则的选择符的固定的，用来引用服务器端的字体文件。

　　<font-description> 是一个属性名值时，格式类似如下样式：

descriptor:value;
descriptor:value;
descriptor:value;
descriptor:value;
{...}
descriptor:value;

　　属性及其取值说明如下：

• • font-family：设置文本的字体名称；
  • font-style：设置文本样式；
  • font-variant：设置文本是否大小写；
  • font-weight：设置文本的粗细；
  • font-stretch：设置文本是否横向的拉伸变形；
  • font-size：设置文本字体大小；
  • src：设置自定义字体的相对路径或者绝对路径。

　　具体的应用请参考这篇文章：字体图标的使用