.svg){kind=icon}
.svg){kind=icon}
什么是
溢出
什么是 CSS 中的 "溢出"？别担心，它比你想象的更容易理解。简单来说，"溢出 "是一种 CSS 属性，用于指定当元素内容框的大小超过给定元素的宽度和/或高度时应如何处理内容。
试想一下，如果你想把太多的东西塞进一个空间里，就像你想把所有的家当都挤进一个旅行背包里一样。这个背包会变得越来越重，直到最后，无论你用什么角度或方法，都会有东西溢出来。在这方面，溢出的功能与此大同小异：在达到一定程度后，元素在不挤压内容的情况下根本无法再容纳更多信息，溢出允许我们限制和控制元素在达到上限时的反应。
在 CSS 文档中使用 Overflow 时，开发人员有三种选择：滚动（最常用于代码的小部分，如边栏）、可见（元素突出于其容器之外）或隐藏（everted 剪报不显示）。这种灵活性使得从自动调整响应式页面的布局到隐藏超出预定义边界的文本流等一切都成为可能，非常适合创建充满视觉趣味的详细设计！
总而言之，尽管有很多常见的网页元素控件都有防止其内容干扰其他设计组件（如轴和边距）的便捷方法，但 Overflows 为设计师提供了对元素边界的全面控制。虽然对设计规则的思考乍一看似乎令人生畏--毕竟，我们的宇宙本身只拥有两条明确的法则--但遵循基本准则，编码就会变得如此全面，以至于相比之下，宇宙的混沌也会觉得简单！
实例
溢出
- 控制网页上文本内容的溢出。
- 使用滚动条限制容器内的某些元素。
- 应用可见性和隐藏规则，使溢出的项目在超出元素内容框的给定尺寸时不被看到。
- 在 CSS 文档中使用 Overflow，以精确的边界剪切设计繁重的页面部分。
- 当达到预定义的阈值时，可立即响应地调整布局，而不会影响其美观性。
- 通过可见或隐藏等溢出选项，防止剪贴与容器外的其他元素重叠，从而保持代码的完整性。
- 将溢出用于特殊效果或诡计，例如在单个内容块内达到溢出阈值时提供 "更多信息 "链接。
- 切掉长长的文本串，使清单保持可读性和条理性，而不会出现每个项目行列包含大量信息的情况。
- 通过这种溢出功能，我们可以在设计项目中设定尊重的界限，以获得理想的外观，从而限制因造型过多而产生的不良后果。
- 在多个动态对象（如视频、幻灯片、表格等）之间设置长度限制，确保用户界面体验流畅，尺寸可控，与创建时应用的类型大小和定位无关！
的好处
溢出
- 隐藏不需要的内容：在网页设计中，有时会有一些内容无法在不破坏页面其他元素的情况下完全容纳在允许的区域内。你可以使用溢出功能，将这些原本具有破坏性的内容置于视线之外，并以简洁的方式呈现相关信息。
- 创建可滚动的容器：利用溢出功能，您可以在灯箱、菜单或手风琴等可滚动容器中容纳大量内容，让用户可以随时对所查看的内容进行更多控制，同时保持简洁高效的体验。
- 保持响应式设计：经过深思熟虑后，溢出功能可以让设计人员在屏幕尺寸发生变化时也能保持一致的框架尺寸，这样框架内的内容就能在不同尺寸或分辨率的设备上保持清晰可读。
甜蜜的事实与统计
- 溢出是一种 CSS 属性，用于指示当内容超出容器大小时应如何处理。
- 它可以设置为 "可见"、"隐藏"、"滚动 "或 "自动 "模式。
- 如果代码中没有指定，溢出的默认值为 "可见"。
- 当溢出与其他属性（如高度和宽度）配合使用时，开发人员在设计网页时就不必担心页面布局中会出现过多的文字。
- Overflow 还拥有自己的速记语法，有助于减少编码时间，提高网页的整体美观度--这是一个 "天文数字 "的帮助！
- 如果在网页元素后面添加交互功能或运行脚本，可能会出现溢出的网页元素技术问题，但通过相应调整溢出属性，可以轻松避免溢出文本等基本问题。
- 响应式设计对不同的视口尺寸和方向非常敏感，因此更常使用溢出声明；尽管窗口尺寸条件不断变化，但响应式设计仍需要将所有元素放入确定的空间中！
的演变
溢出
自诞生以来，溢出一直是 CSS 世界中不可或缺的一部分。最初，当内容超出元素框模型的边界时，它是一种控制内容包含和呈现方式的手段，在它的生命周期中，这给各种跨浏览器平台带来了许多困难。
在 2000 年中期，随着 "浮动 "等发明被希望在网站上实现动态控制的网络开发人员所接受，CSS 的指令性逐渐增强。从那时起，CSS 中的溢出模块经历了无数次改动，以满足动态需求，如滚动条、叠加框架和自适应消息通知--所有这些现在都是任何网站布局的主要功能。
毫无疑问，随着浏览器的不断升级，我们也看到了 Overflow 的调整；从通过 "列切换 "等伪类让用户更好地查看/控制多列，到在悬停状态下隐藏/显示工具提示或淡出框而不会对其他地方造成严重后果。这种效果是毋庸置疑的，以至于今天我们甚至无法想象，在开发一个网站时，如果不在不同的元素上利用某种过载功能。
随着技术的飞速发展，新的设计趋势必然会导致 Overflow 代码的进一步演变。在此之前，让我们赞美 Overflow 为我们提供的这一奇妙的附加功能，它可以快速交付精美复杂的布局。一句话下次点击 "发布 "时，去感谢发明 "溢出 "的人吧（利用它的强大功能）！
