css3文本效果——文字阴影和文字换行

1. 文字阴影：text-shadow

text-shadow: h-shadow v-shadow blur color;

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述	测试
h-shadow	必需。水平阴影的位置。向左为正值，允许负值。	测试
v-shadow	必需。垂直阴影的位置。向下为负值，允许负值。	测试
blur	可选。模糊的距离。	测试
color	可选。阴影的颜色。	测试

实例： p{text-shadow: 20px 20px 2px red;}

带有模糊效果的文本阴影：text-shadow:2px 2px 8px #FF0000;

白色文本上的阴影：text-shadow:2px 2px 4px #000000;

霓虹灯效果的文本阴影：text-shadow:0 0 3px #FF0000;

2. text-overflow.

text-overflow 属性规定当文本溢出包含元素时发生的事情。

ellipsis	溢出部分打点展示
clip	溢出部分截断

clip的效果：

3. word-wrap：单词换行，默认值是normal

正常情况下，单词和URL超出了盒子边界，单词URL整体会换行，而break-Word值：

word-wrap：break-word;在长单词或 URL 地址内部进行换行，就是强制让单词或URL换行。

4. word-break：break-all，英文单词断开换行

5. word-break：keep-all，只能在半角空格或连字符处换行

6. white-space：nowrap，单词和cjk文字都不换行

注意：单词“coll,ege”浏览器会默认一个单词，即一个字符串；会忽略逗号。

实例：正常情况下的结果：

<div style="width:150px; border:1px solid black">you are coooooooooooooooool</div>

（1）在word-wrap：break-word属性作用下：对英文有效

<div style="width:150px; border:1px solid black;word-wrap:break-word;">you are coooooooooooooooool</div>

结果：

内容是cjk文字时：该属性值无效，和正常情况一样

（2）在word-break：break-all属性作用下：对英文有效

<div style="width:150px; border:1px solid black;word-break:break-all;">好好学习，天天向上，好好学习，天天向上</div>

 内容是英文时：

内容是cjk文字时：该属性值无效，和正常情况一样

（3）在word-break：keep-all属性作用下：keep-all只能在半角空格或连字符处换行，对中文有效

<div style="width:150px; border:1px solid black;word-break:keep-all;">好好学习，天天向上，好好学习，天天向上</div>

  

内容是cjk文字时：

（4）在white-space:nowrap属性作用下，对英文和cjk文字都有效

<div style="width:150px; border:1px solid black;white-space:nowrap;">好好学习，天天向上，好好学习，天天向上</div>