零基础教你学前端——80后，布局溢出处理
时间：2023-04-02 20:52:23
HTML
先来看一个例子。这个容器里有两段文字和一张图片。由于容器的高度小于内容的总高度，因此无法显示所有内容。内容。此时，我们可以使用鼠标滚轮上下滚动容器的内容来查看全貌。这个效果是如何实现的？您一定想到了iframe！其实这个功能也可以通过CSS的溢出样式来实现。CSS的overflow属性指定当元素的内容太大无法容纳指定区域时是否裁剪内容或添加滚动条。overflow属性具有以下值：visible-默认值。溢出的内容不会被剪裁。内容呈现在元素的边界框之外。隐藏-溢出的内容被剪掉，其余内容将不可见。scroll-溢出的内容被剪裁并添加滚动条以查看剩余内容。auto-类似于scroll，但它只在必要时添加滚动条。这是我已经制作的页面。div容器包含三个段落，分别放置两段文字和一张图片。该容器具有背景颜色、填充和边框集。在浏览器中预览，内容填满整个容器，全部显示出来。接下来，将width:50%,height:300px样式添加到外部div容器。HTML国外某公司开发了一款自动找bug的AI程序，但是这个程序却“点化”了它！AI“启蒙”后Bug的终极解决方案是：无代码，无Bug，全部删除！这是发生在美国的真实事件。美版大众点评本来是想训练AI来除bug的，结果删掉了所有内容。先来看看软件的更新介绍：
大概意思是：我们是第一个向应用程序出现问题的人道歉，我们训练了一个神经网络来消除应用程序的错误，但它删除了所有内容。幸运的是，这件事发生在国外。这样的重大安全事件要是发生在国内的互联网公司，恐怕又要换一个工程师“祭天”了。
CSS#overflowTest{背景：#4CAF50;填充：15px；border:1pxsolid#ccc;}我们看到虽然容器的高度小于内容的整体高度，但是容器中的内容仍然是全屏显示的。这意味着默认情况下，浏览器会完全显示容器的溢出部分。回到css代码，添加styleoverflow:visibletothediv容器。效果是一样的，说明visible是overflow属性的默认值。如果要隐藏溢出，需要将overflow的值设置为hidden（注意这个词读作[?h?dn]）。果然溢出的部分是隐藏的，此时隐藏的内容是看不到的。如果想通过滚动条查看隐藏的内容，需要设置overflow的值为scroll。这样就可以通过滚动条查看所有的内容了！当然也可以将overflow的值设置为auto，和scroll效果一样。回到css代码，我们修改div容器的宽度为30%。看效果，水平和垂直都可以滚动。如果只想在一个方向滚动，可以使用overflow-x和overflow-y两个样式属性，指定是只在水平方向滚动还是在垂直方向滚动。例如注释掉overflow:scroll并添加样式overflow-y:scroll。我们可以看到此时垂直方向可以滚动，但是水平方向也可以滚动，说明overflow-y只能约束垂直方向。然后添加样式overflow-x:hidden。这一次，您不能水平滚动，只能垂直滚动！有时，文字标题或文字内容所在的容器空间有限，无法显示全部内容时，会出现省略号提示读者：内容显示不全，可点击查看详细内容内容。如何实现这种效果？向正文中添加一个h1元素并填充一些内容。在css文件中，定义选择器h1，声明样式width：310px，overflow：hidden，white-space：nowrap。让文字出现在一行中，隐藏溢出部分。显然，此时的效果对用户体验来说并不好——文字被截断了。回到css代码，为h1添加另一个text-overflow:ellipsis样式。再来看一下艾莱普种族分部，效果已经实现了！本文相关教程链接：https://www.bilibili.com/video...
