共计 1724 个字符，预计需要花费 5 分钟才能阅读完成。
咱们先来看个例子，这个容器里有两段文字和一张图片，因为容器的高度小于蕴含内容的总高度，不能显示全副的内容。此时，咱们能够通过鼠标滚轮使容器的内容高低滚动，来查看全貌。
这个成果是如何实现的呢？你肯定想到的是 iframe！实际上，通过 CSS 的溢出款式也能实现这个性能。
CSS 的 overflow 属性，指定了当一个元素的内容太大，无奈包容在指定区域时，是否要裁剪内容或增加滚动条。overflow 属性有以下值：
visible – 默认。溢出的内容没有被剪掉。内容会在元素的框外出现。
hidden – 溢出的内容被剪切，其余的内容将不可见。
scroll – 溢出的内容被剪掉了，并且减少了一个滚动条来查看其余的内容。
auto – 相似于 scroll，但它只在必要时增加滚动条。
这是我曾经制作好的一个页面。div 容器里蕴含三个段落，别离搁置的是两段文本和一张图片。容器设置了背景色彩、内填充和边框。
在浏览器里预览，内容撑满整个容器，全副显示进去了。
接下来给内部的 div 容器增加 width: 50%、height: 300px 的款式。
HTML
<div id="overflowTest">
<p>
国外某公司呢开发了一款主动找 bug 的 AI 程序，然而这个程序“悟道”了！AI“悟道”后解决 bug 的终极计划就是：没有代码就没有 bug，全删！这是一个产生在美国的实在事件，美国版的公众点评，原本想训练 AI 来打消 bug，后果它把所有的内容全副删除了。来看看 软件的更新介绍：</p>
<p>
<img src="./image.jpeg" alt=""width="600">
</p>
<p>
大略意思就是：咱们为本周应用该 app 遇到问题的用户致歉，咱们训练了一个神经网络，来消愁该 app 的破绽，但它删除了所有。还好这事产生在国外，要是在国内的互联网公司，这么大的安全事故，又要有一个工程师“祭天”了。</p>
</div>CSS
#overflowTest {
background: #4CAF50;
padding: 15px;
border: 1px solid #ccc;
}咱们看，容器的高度尽管小于内容的总体高度，然而容器里的内容还是全副显示了。这阐明浏览器在默认状况下，对容器溢出的局部是齐全显示的。
回到 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 累铺赛司
咱们再看，成果实现了！
本篇文章相干的教程链接：https://www.bilibili.com/vide…
