css3中的文字效果

 今天先来学习：text-shadow,word-wrap,word-break text-overflow;四个属性；

 1.text-shadow：h-shawo v-shadow blur color;

分别代表着：水平方向上的阴影位置,垂直方向上的位置，模糊距离，颜色；

实例一：

css：

.textInfo{
       height:100px;    width:200px;    font-size:18px;    font-weight:bold;    text-shadow:10px 10px 1px red;}

效果：

 

2.word-wrap:normal||break-word;

参数分别代表：正常显示（长的英文单词不截断，是默认值）|| 把长单词强行截断

使英文长单词可以截断，分两行显示。所有浏览器都已经支持，在中文的不存在这样的问题，因为每个汉字就当作一个单词。

实例：

css：

.textInfo1{
       height:120px;    width:100px;    border:1px solid red;    word-wrap:normal;    float:left;    margin-left:40px;}.textInfo2{
       height:120px;    width:100px;    border:1px solid red;    word-wrap:break-word;    float:left;    margin-left:40px;}

效果对比：

 

 

三：word-break:normal || break-all || keep-all;（规定非中日韩文本的换行规则）

参数解读：

 normal:使用浏览器默认的换行规则；

break-all:不管什么字符都强制换行（允许在单词内换行）；

keep-all：只能在半角空格或连字符处换行；

 

四：text-overflow

当规定的文本溢出所包含的元素时：

css：

.demo{
       height:20px;    width:100px;    border:1px solid red;    float:left;    overflow:hidden; /*仅仅是hidden*/    margin-left:40px;}.demo1{
       height:20px;    width:100px;    border:1px solid red;    float:left;    overflow:hidden;    text-overflow:clip; /*剪切*/    white-space:nowrap; /*规定段落文本不进行换行*/    margin-left:40px;}.demo2{
       height:20px;    width:100px;    border:1px solid red;    overflow:hidden;    text-overflow:ellipsis;/*用省略号表示*/     white-space:nowrap; /*规定段落文本不进行换行*/    float:left;    margin-left:40px;}

效果：

顺便补充一下：white-space的用法；在demo的css样式中，操作溢出的文本是换行了滴，直接添加text-overflow是看不见效果的，必须添加

white-space才能看到效果的滴，

对比一下：

 

这里还有一个较为完整的实例：http://www.jb51.net/css/42578.html