CSS3之文本

一、文本简介

复合属性font：

二、CSS3文本阴影属性

text-shadow属性的语法及参数

语法：

参数值说明：

color：阴影颜色，定义绘制阴影时所使用的颜色，可以放在第一也可以放在最后。

x-offset：X轴位移，指定阴影水平位移量，可以取正负值。取正值，阴影在对象的右边；取负值，阴影在对象的左边。

y-offset：Y轴位移，指定阴影垂直方向偏移量，可以取正负值。取正值，阴影在对象的底部；取负值，阴影在对象的顶部。

blur-radius：阴影模糊半径，代表阴影向外模糊的范围。只能取正值，值为0时，表示不具有模糊效果。

示例代码；

示例效果图：

三、CSS3溢出文本属性

语法：

属性值说明：

clip：不显示省略标记（…），只是简单的裁切；

ellipsis：文本溢出时显示省略号（…），省略标记插入的位置是最后一个字符。

text-overflow属性仅用于决定文本溢出时是否显示省略标记，并不具备样式定义的功能。要实现文本溢出时裁切显示省略标记效果，还需要两个属性的配合，强制文本在一行显示和溢出内容隐藏，并且需要定义容器的宽度。

四、css3文本换行

1、word-wrap属性

使用word-wrap属性实现长单词与URL地址的自动换行。

语法：

属性值说明：

normal：默认值，浏览器只在半角空格或连字符的地方进行换行；

break-word：将内容在边界内换行（不截断英文单词换行）

注意：word-wrap用在和中是没有效果的。

2、word-break属性

word-break属性用来设置对象内文本的字内换行行为，在出现多种语言的情况下尤为有用。

语法：

属性值说明：

normal：默认值，根据语言自己的规则确定换行的方式，中文到边界换行，英文从整个单词换行。

break-all：可以强行截断英文单词，达到词内换行。

keep-all：不允许字断开。

提示：word-break取值为keep-all时，中文在不同的浏览器下显示风格各异，但英文都是一致的，长文本会撑破容器溢出显示。

3、white-space属性

white-space属性主要用来声明建立布局过程中如何处理元素中的空白符。

语法：

属性值说明：

normal：默认值，空白处会被浏览器忽略。

pre：保留输入的文本格式，类似于中的pre标签效果。

nowrap：文本不会换行，文本会在 同一行上，直到碰到换行标签为止。

pre-line：合并空白符序列，但保留换行符。

pre-wrap：保留空白符序列，正常进行换行。

inherit：继承父元素的white-space属性值。所有的浏览器都不支持该属性值。

4、文本换行技巧1）pre标签自动换行

2） 单元格td自动换行

3） 除pre、td标签外其它标签的自动换行

4） 标签内容强制不换行

扫码二维码关注我们