范仁义css3课程---7、文本2（css3文本）
一、总结
一句话总结：
css对应的文本属性中text-overflow、word-break比较常用，需要好好掌握
1、设置文本的阴影效果用什么属性？
text-shadow 属性应用于阴影文本：例如 h1{text-shadow: 2px 2px #ff0000;}
2、设置 文本溢出包含它的元素之后发生什么 用什么属性？
text-overflow属性指定当文本溢出包含它的元素，应该发生什么：例如 div.test{text-overflow:ellipsis;}
3、设置 允许对长的不可分割的单词进行分割并换行到下一行 用什么属性？
word-wrap属性允许长的内容可以自动换行：例如 p.test {word-wrap:break-word;}
4、设置 规定非中日韩文本的换行规则 用什么属性？
word-break属性指定非CJK脚本的断行规则：例如 p.test {word-break:break-all;}
二、css3文本样式
1、文字阴影
text-shadow 属性应用于阴影文本。
语法
text-shadow: h-shadow v-shadow blur color;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
h1
{
text-shadow: 2px 2px #ff0000;
}
2、文字超出设置
text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
语法
text-overflow: clip|ellipsis|string;
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
div.test
{
text-overflow:ellipsis;
}
3、允许对长的不可分割的单词进行分割并换行到下一行
word-wrap属性允许长的内容可以自动换行。
语法
word-wrap: normal|break-word;
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
p.test {word-wrap:break-word;}
4、规定非中日韩文本的换行规则
word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
语法
word-break: normal|break-all|keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
p.test {word-break:break-all;}
参考：https://www.runoob.com/css3/css3-text-effects.html