第17篇溢出处理与文本截断网页中的内容不可能总是刚好适配容器。当内容超出边界时CSS 提供了丰富的溢出控制手段。本篇将系统讲解overflow家族的用法以及文本截断的各种实用方案。学习目标理解 overflow 的五种取值及其行为差异掌握 overflow-x 与 overflow-y 的组合使用学会实现单行文本截断学会实现多行文本截断了解滚动条样式的自定义方法理解 overflow: clip 的现代语义核心知识点一、overflow 基础overflow控制当元素内容超出其盒子边界时的行为。五种取值取值效果visible默认值内容溢出显示hidden溢出内容被裁剪不可见scroll始终显示滚动条即使不需要auto需要时显示滚动条clip类似 hidden但不创建 BFC不能滚动.box{width:200px;height:100px;border:2px solid #4a90d9;}.visible{overflow:visible;}/* 内容溢出显示 */.hidden{overflow:hidden;}/* 裁剪溢出内容 */.scroll{overflow:scroll;}/* 始终显示滚动条 */.auto{overflow:auto;}/* 按需显示滚动条 */.clip{overflow:clip;}/* 裁剪无滚动 */overflow: clip是 CSS Overflow Module Level 3 的新特性与hidden的关键区别在于clip 不创建 BFC且内容完全不可滚动。双轴控制可以分别控制水平和垂直方向的溢出行为.scroll-x{overflow-x:auto;/* 水平溢出时滚动 */overflow-y:hidden;/* 垂直方向裁剪 */}/* 简写形式 */.scroll-x{overflow:hidden auto;/* y 轴 hidden, x 轴 auto */}注意overflow-x和overflow-y有一个特殊规则——如果一个轴设为visible另一个轴设为非visible如 hidden/auto则visible会被降级为auto。二、滚动容器创建滚动容器.scrollable{max-height:300px;overflow-y:auto;}divclassscrollablep内容1.../pp内容2.../p!-- 更多内容... --/div平滑滚动html{scroll-behavior:smooth;/* 锚点跳转平滑滚动 */}.scrollable{scroll-behavior:smooth;/* 容器内滚动也平滑 */}滚动吸附Scroll Snap.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;/* x轴强制吸附 */scroll-behavior:smooth;}.carousel-item{flex:0 0 100%;/* 每项占满容器 */scroll-snap-align:start;/* 吸附到起点 */}三、文本截断单行截断三件套缺一不可.truncate{white-space:nowrap;/* 不换行 */overflow:hidden;/* 裁剪溢出 */text-overflow:ellipsis;/* 显示省略号 */}这三个属性必须同时设置缺一不可。容器还需要显式或隐式的宽度限制width / max-width / flex 布局等。多行截断/* 现代浏览器方案-webkit 前缀但已成标准 */.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;/* 限制3行 */overflow:hidden;}/* line-clamp 现代简写部分浏览器支持 */.line-clamp{line-clamp:3;overflow:hidden;}-webkit-line-clamp虽然带前缀但已被所有现代浏览器实现为标准行为无需担心兼容性问题。从任意位置截断/* 在中间截断 */.middle-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* 自定义截断字符Firefox 支持 */.custom-ellipsis{text-overflow: [更多...];}text-overflow 取值取值说明clip直接截断无省略号ellipsis显示省略号...自定义字符串显示自定义文本Firefox 支持四、滚动条样式WebKit 浏览器Chrome/Safari/Edge/* 整个滚动条 */::-webkit-scrollbar{width:8px;/* 垂直滚动条宽度 */height:8px;/* 水平滚动条高度 */}/* 滚动条轨道 */::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;}/* 滑块悬停 */::-webkit-scrollbar-thumb:hover{background:#a8a8a8;}/* 滚动条角落 */::-webkit-scrollbar-corner{background:transparent;}Firefox.scrollable{scrollbar-width:thin;/* auto | thin | none */scrollbar-color:#c1c1c1 #f1f1f1;/* thumb track */}隐藏滚动条/* 所有浏览器 */.hide-scrollbar{scrollbar-width:none;/* Firefox */-ms-overflow-style:none;/* IE/Edge 旧版 */}.hide-scrollbar::-webkit-scrollbar{display:none;/* WebKit */}五、溢出相关的实用场景防止布局抖动当内容从短变长如异步加载滚动条的出现会导致页面宽度变化引发布局抖动/* 方案1始终预留滚动条空间 */html{overflow-y:scroll;/* 始终显示垂直滚动条 */}/* 方案2现代方案推荐 */html{scrollbar-gutter:stable;/* 预留滚动条空间 */}图片适配容器.image-container{width:300px;height:200px;overflow:hidden;/* 裁剪超出部分 */}.image-container img{width:100%;height:100%;object-fit:cover;/* 填满容器可能裁剪 */}长单词处理.break-word{word-break:break-word;/* 在任意位置换行 */overflow-wrap:break-word;/* 同上更现代 */}/* 连字符换行 */.hyphen{hyphens:auto;overflow-wrap:break-word;}动手练习练习 1卡片描述截断创建一个卡片组件标题最多显示1行超出显示省略号描述最多显示3行超出显示省略号底部有展开按钮纯样式练习无需交互练习 2自定义滚动条创建一个固定高度的内容区域内容溢出时显示自定义样式的滚动条滚动条宽度 6px圆角滑块颜色与页面主题色一致练习 3横向滚动画廊实现一个图片横向滚动画廊使用overflow-x: auto添加滚动吸附效果scroll snap隐藏默认滚动条保持可滚动常见误区 ⚠️误区真相“overflow: hidden会隐藏子元素的阴影”正确box-shadow 如果超出父元素边界会被裁剪“text-overflow单独使用就能截断”必须配合white-space: nowrap和overflow: hidden“-webkit-line-clamp只兼容 WebKit”错误Firefox 和 Chrome 都支持已成事实标准“overflow: auto和scroll效果一样”auto只在需要时显示滚动条scroll始终显示“滚动条占据布局空间”overflow: scroll的滚动条占用空间overlay模式不占用WebKit 中::-webkit-scrollbar默认 overlay“隐藏滚动条后不能滚动”错误只是视觉隐藏鼠标滚轮和触摸仍可滚动“word-break: break-all和break-word相同”break-all在任意字符间断行break-word优先在单词边界断行速查卡片 单行截断.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}多行截断.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}自定义滚动条::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f1f1f1;}::-webkit-scrollbar-thumb{background:#888;border-radius:4px;}隐藏滚动条.hide-scrollbar{scrollbar-width:none;}.hide-scrollbar::-webkit-scrollbar{display:none;}扩展阅读MDN: overflowMDN: text-overflowMDN: -webkit-line-clampCSS-Tricks: Line Clampin’英文配套代码CODE/17/overflow-demo.html — overflow 行为对比演示CODE/17/text-truncate-advanced.html — 文本截断与滚动条实战下一步进入 第18篇定位系统详解上学习 position 属性的基础与相对/绝对定位。