Web前端开发- 网页设计 课件 5.3 CSS3文本新特性

单元5

CSS3新特性5.3

CSS3文本新特性主要内容C

O

N

T

E

N

T

SPART

01CSS3新增文本相关属性PART

03CSS3设置自定义字体PART

02CSS3设置多列文本CSS3新增文本相关属性word-wrap和word-break属性属性描述规定是否允许一个长单词（或URL地址）内部进行换行。□normal：只在允许的断字点换行（浏览器保持默认处理）。□break-word：在长单词或URL地址内部进行换行。规定非中日韩文本的断行方式□normal：使用浏览器默认的断行规则。□break-all：允许在单词内断行。□keep-all：只能在半角空格或连字符处断行。word-wrapword-break□相同点：都能对长单词进行强制换行。□不同点：当前行的剩余宽度放不下一个长单词时，word-wrap:break-word会首先另起一个新行，若新行依然

放不下该长单词，则会对长单词进行换行；而word-break:break-all则不会另起一个新行，直接在当前行宽度用完后断行。□建议：若想更加节省空间，建议使用word-break:break-all。【案例5.3.1】长单词的换行处理CSS3新增文本相关属性text-overflow属性：指定当文本溢出包含它的父元素时，该如何显示。clip:修剪文本。ellipsis：显示省略号来代表被修剪的文本。string：使用自定义字符串来代表被修剪的文本（只受部分浏览器支持）。text-overflow:

clip|ellipsis|string;注意：text-overflow需要配合以下两个属性一起使用，否则设置效果不起作用。white-space:

nowrap;overflow:

hidden;【案例5.3.2】文本溢出父容器的处理CSS3新增文本相关属性text-shadow属性：为文本添加阴影。一次可为文本添加多个阴影，各阴影的设置之间用逗号分隔开来。text-shadow:

h-shadow

v-shadow

blur

color;h-shadow：必需，定义水平阴影的位置，允许负值。v-shadow：必需，定义垂直阴影的位置，允许负值。blur：可选，定义阴影的模糊距离。color：可选，定义阴影的颜色。【案例5.3.3】text-shadow属性设置文本阴影CSS3设置多列文本CSS3引入了支持多列布局的column系列属性，有了这些属性，无需再通过设置浮动、定位等方式，即可方便地创建像报纸杂志上那样的多列文本。属性 描述column-countcolumn-widthcolumnscolumn-gap指定文本被分割的列数。指定每列的宽度。column-width与column-count属性的简写。指定两列间的间隙宽度，默认值为1em。column-rule-width指定两列间分隔线的厚度。指定两列间分隔线的样式。指定两列间分隔线的颜色。以上column-rule-*属性的复合写法。指定元素横跨多少列。column-rule-stylecolumn-rule-colorcolumn-rulecolumn-span注意：多数时候，设置多列只需设置column-count或column-width这两个属性中的一个。若同时设置了这两个属性，则按照“取大优先”的原则，即：哪个属性设置下的列宽更宽，则哪个属性设置优先生效。CSS3设置自定义字体CSS3之前，网页呈现的字体效果受限于客户端操作系统是否安装有该字体，若没有则无法正常显示。CSS3新增的Web

Fonts功能，允许网页使用服务器端字体。使用@font-face规则定义自定义字体，并从服务器端下载字体文件。使用font-family属性为网页元素应用自定义字体。【案例5.3.4】CSS3设置多列文本及自定义字体@font-face{

font-family:myFont;src:url("