溢出OVERFLOW未增删带(零基础教你学前端)

大家好，今天来为大家解答溢出OVERFLOW未增删带这个问题的一些问题点，包括零基础教你学前端也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

我们先来看个例子，这个容器里有两段文字和一张图片，由于容器的高度小于包含内容的总高度，不能显示全部的内容。此时，我们可以通过鼠标滚轮使容器的内容上下滚动，来查看全貌。

这个效果是如何实现的呢？你一定想到的是iframe！实际上，通过CSS的溢出样式也能实现这个功能。

CSS的overflow属性，指定了当一个元素的内容太大，无法容纳在指定区域时，是否要裁剪内容或添加滚动条。overflow属性有以下值：

visible-默认。溢出的内容没有被剪掉。内容会在元素的框外呈现。

hidden-溢出的内容被剪切，其余的内容将不可见。

scroll-溢出的内容被剪掉了，并且增加了一个滚动条来查看其余的内容。

auto-类似于scroll，但它只在必要时添加滚动条。

这是我已经制作好的一个页面。div容器里包含三个段落，分别放置的是两段文本和一张图片。容器设置了背景颜色、内填充和边框。

在浏览器里预览，内容撑满整个容器，全部显示出来了。

接下来给外部的div容器添加width:50%、height:300px的样式。

HTMLn<divid="overflowTest">n<p>n国外某公司呢开发了一款自动找bug的AI程序，但是这个程序“悟道”了！AI“悟道”后解决bug的终极方案就是：没有代码就没有bug，全删！这是一个发生在美国的真实事件，美国版的大众点评，本来想训练AI来消除bug，结果它把所有的内容全部删除了。来看看软件的更新介绍：n</p>n<p>n<imgsrc="./image.jpeg"alt=""width="600">n</p>n<p>n大概意思就是：我们为本周使用该app遇到问题的用户致歉，我们训练了一个神经网络，来消愁该app的漏洞，但它删除了一切。还好这事发生在国外，要是在国内的互联网公司，这么大的安全事故，又要有一个工程师“祭天”了。n</p>n</div>

CSSn#overflowTest{nbackground:#4CAF50;npadding:15px;nborder:1pxsolid#ccc;n}

我们看，容器的高度虽然小于内容的总体高度，但是容器里的内容还是全部显示了。这说明浏览器在默认情况下，对容器溢出的部分是完全显示的。

回到css代码，给div容器再添加样式overflow:visible。

效果是一样的，说明visible是overflow属性的默认值。

如果希望把溢出的部分隐藏，需要将overflow的值设置为hidden（注意这个单词读[?h?dn]）。

果然，溢出的部分隐藏了，此时是无法看到隐藏的内容的。

如果希望通过滚动条查看隐藏的内容，需要将overflow的值设置为scroll。

这样，就可以通过滚动条来查看全部内容了！

当然，也可以把overflow的值设置为auto，此时和scroll效果一样。

回到css代码，我们将div容器的width修改为30%。

看效果，水平和垂直方向都可以滚动了。

如果只希望某一个方向滚动，可以采用overflow-x和overflow-y两个样式属性，它们指定是否只在水平方向或垂直方向上滚动。

比如，注释掉overflow:scroll，添加样式overflow-y:scroll。

我们看，此时垂直方向可以滚动，可是水平方向也可以滚动，说明overflow-y只能约束垂直方向。

再添加样式overflow-x:hidden。

这回，水平方向就不能滚动了，只有垂直方向可以滚动！

有时，文字标题或文字内容所在的容器空间有限，不能显示全部内容的时候，会出现一个省略号，示意读者：内容显示不全，可以点击查看详细内容。这个效果如何实现呢？

在body里添加一个h1元素，填入一些内容。

在css文件里，定义选择器h1，声明样式width:310px，overflow:hidden，white-space:nowrap。让文本在一行上显示，并且溢出的部分隐藏。

很显然，此时的效果用户体验不好——文字被剪切了。

回到css代码，给h1再添加一个text-overflow:ellipsis样式。ei累铺赛司

我们再看，效果实现了！

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！