overflow什么意思：内容超出既定范围出现溢出状态

overflow什么意思:内容超出既定范围出现溢出状态

前段时间对着网页代码折腾半天，同事凑过来指着控制台里反复跳出的英文，随口问起overflow什么意思，当时只模模糊糊记得和内容超限有关，说不出个准头，手上还在拖动页面里错位的图片和文字，整块区域像是被硬生生撑破得边界，原本规整的布局乱成一团，滚动条莫名变长，部分文字直接跑到了边框外面，试了好几次调整字体大小和间距，界面依旧没能恢复正常，越改心里越烦躁，明明只是改了几行样式代码，怎么就闹出这样得状况，越琢磨越觉得离谱，明明前一天打开还一切正常。

盯着代码行看了十几分钟，完全摸不着头绪。

一开始以为只是尺寸数值写错了，把容器的宽高来回改动，一会调大一会缩小，可溢出的内容还是安安稳稳飘在边界之外，半点变化都没有。当时脑子里乱糟糟的，一会怀疑是布局框架出了问题，一会又觉得是不是浏览器缓存在作祟，索性清空缓存重新加载页面，结果现状还是一模一样，这下彻底没了思路，也不在想着再随便乱改参数了。

后来才反应过来，问题就出在overflow这个属性本身，日常接触里这个单词不单单是字面翻译的溢出，在前端页面、表格、文档这类场景里，特指元素里面的内容体量超过了外层容器所能容纳的空间，多余的部分就会脱离原本的位置，要么直接外露出来，要么自动生成滚动条来收纳这些内容，不同的属性值还会对应不一样的展示效果，有的会直接裁切多余内容，有的允许横向纵向滚动，还有的会让内容完全隐藏起来，之前一直把它当成一个单纯的报错词汇，压根没深究过具体用法，也不清楚不同设置之间的差别到底在哪。

随手敲了一行代码测试。

把overflow设置成hidden之后，页面里越界的文字和图片瞬间被收了回去，布局一下子就整齐了，可随之而来又发现新问题，部分重要内容被直接遮挡，用户没法查看完整信息，这个解法就是临时盖住了问题，并没有从根源上理顺内容和容器的匹配关系。那会儿也不在想再深挖复杂的参数搭配，就想着先把眼前的界面恢复正常就行。

接着换成auto属性值，页面右侧慢慢多出一条竖向滚动条，超出范围的内容被框在了容器内部，滑动滚轮就能完整浏览所有文字和图片，既没有内容外露打乱布局，也不会出现内容被截断看不到的情况，反复刷新几次页面，不管放大还是缩小浏览器窗口，这个状态都能保持稳定，折腾这么久，总算找到适配当下场景的设置方式。

其实平时在用办公软件的时候也碰到过类似情况，表格单元格里文字太多，超出单元格宽度就会串到隔壁格子里，其实本质也是overflow对应的现象，只是办公软件里不会显示这个英文单词，大家习惯叫文字溢出、内容串位，本质逻辑都是相通的，之前从来没把代码里的术语和日常办公的小问题联系到一块，现在对应起来反倒一下通透了。

关掉代码编辑器，伸手端起桌边的水杯。