Web前端开发项目教程 课件 6.2 处理元素的溢出问题

Web前端开发项目教程主讲人：卞孝丽处理元素的溢出问题【任务目标】

知识目标了解overflow属性值为auto时的使用方法；掌握利用overflow属性处理元素溢出问题的方法。

能力目标能够灵活运用overflow属性处理内容溢出的情况。

素质目标提升人与人之间交往的边界意识，营造宽容失败的人文环境。【导学知识】一、认识溢出

使用尺寸属性控制元素大小时，如果内容所需空间大于元素本身大小，会导致内容溢出。CSS中用overflow属性指定在元素的内容太多太大而无法放入指定区域时是剪裁内容还是添加滚动条，overflow属性仅适用于具有指定高度的块元素，具体属性值及含义见表所示：值含义visible溢出内容不会被裁剪，会呈现在元素框之外（默认值）hidden有溢出时，溢出内容会被裁剪，并且被裁剪的内容是不可见的auto有溢出内容时会被裁剪，并在需要时产生滚动条scroll有溢出内容时会被裁剪，且不管是否需要都显示左右和上下滚动条【导学知识】overflow取值为visible：overflow取值为auto：

overflow属性取值为visible时的溢出效果如图所示，可以看到超出div父框的内容依然是可见的。

将溢出值改为auto后效果如图所示，超出div父框的内容隐藏，并且根据需要自动出现了上下滚动条。overflow取值为hidden：通过设置元素overflow溢出属性值为hidden，可以达到隐藏其溢出内容的效果，如图所示，超出div父框的内容隐藏不见了。overflow取值为scroll：

溢出值改为scroll后效果如图所示，超出div父框的内容隐藏，并且出现左右和上下滚动条，拖动上下滚动条可以看到被隐藏的内容。可以使用横向溢出处理overflow-x:scroll;或纵向溢出处理overflow-y:scroll;只在水平或垂直方向上添加滚动条。二、溢出案例【导学知识】三、text-overflow属性属性定义及使用说明text-overflow属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号(...)或显示自定义字符串（不是所有浏览器都支持）。text-overflow需要配合以下两个属性使用：white-space:nowrap;overflow:hidden;语法格式：text-overflow:clip|ellipsis|string|initial|inherit;值 描述clip 剪切文本ellipsis 显示省略符号...来代表被修剪的文本string 使用给定的字符串来代表被修剪的文本initial 设置为属性默认值inherit 从父元素继承该属性值取值说明：【导学知识】四、单行文本溢出处理案例：实现文本超出一行后，其余内容显示省略号【导学知识】多行文本显示省略号有两种办法：第一种：利用旧版弹性盒步骤：给容器元素类型转换为display:-webkit-box;设置弹性盒子垂直排列-webkit-box-orient:vertical;控制要显示的行数-webkit-line-clamp：数值；溢出隐藏overflow:hidden。优点：兼容性比较好缺点：如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示

一般效果如左图

有缺点的bug图片解释如右图五、多行文本溢出处理【导学知识】第二种：使用定位伪元素遮盖末尾文字步骤：1.设置溢出隐藏；2.追加伪元素::after，并为其设置属性。优点：适用范围广泛。缺点：当内容没有超出容器范围之外时，也会在右下角显示省略号。低版本浏览器不兼容。

一般效果如左图

缺点的图片解释如右图【任务小结】

本节课我们了解了overflow属性值为auto时的使用方法，掌握了利用overflow属性处理元素溢出问题的方法，能够灵活运用overflow属性处理内容溢出的情况。

“谦受益,满招损；月盈则亏,水满则溢”。万事亏缺有度，所谓此消彼长，物盛则衰，是万物发展的一种规律。在中国画中，有“