5.3 CSS3文本新特性-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元5 CSS3新特性 5.3 CSS3文本新特性 主要内容 CONTENTS PART 01 CSS3新增文本相关属性 PART 03 CSS3设置自定义字体 PART 02 CSS3设置多列文本 2 CSS3新增文本相关属性 word-wrap和word-break属性 属性 描述 word-wrap 规定是否允许一个长单词（或 URL 地址）内部进行换行。 normal：只在允许的断字点换行（浏览器保持默认处理）。 break-word：在长单词或 URL 地址内部进行换行。 word-break 规定非中日韩文本的断行方式 normal：使用浏览器默认的断行规则。 break-all：允许在单词内断行。 keep-all：只能在半角空格或连字符处断行。 相同点：都能对长单词进行强制换行。 不同点：当前行的剩余宽度放不下一个长单词时，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属性：为文本添加阴影。一次可为文本添加多个阴影，各阴影的设置之间用逗号分隔开来。 h-shadow：必需，定义水平阴影的位置，允许负值。 v-shadow：必需，定义垂直阴影的位置，允许负值。 blur：可选，定义阴影的模糊距离。 color：可选，定义阴影的颜色。 text-shadow: h-shadow v-shadow blur color; 【案例5.3.3】text-shadow属性设置文本阴影 CSS3设置多列文本 CSS3 引入了支持多列布局的column系列属性，有了这些属性，无需再通过设置浮动、定位等方式，即可方便地创建像报纸杂志上那样的多列文本。 属性 描述 column-count 指定文本被分割的列数。 column-width 指定每列的宽度。 columns column-width与column-count属性的简写。 column-gap 指定两列间的间隙宽度，默认值为1em。 column-rule-width 指定两列间分隔线的厚度。 column-rule-style 指定两列间分隔线的样式。 column-rule-color 指定两列间分隔线的颜色。 column-rule 以上column-rule-* 属性的复合写法。 column-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('rajdhani-bold.ttf')，url('rajdhani-bold.eot'); } p{ font-family: myFont;} 应用自定义字体 设置自定义字体 感谢观看 $