css3中的文字效果

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