范仁义css3课程---7、文本2（css3文本）

范仁义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