CSS 课堂笔记：多行省略号 & 垂直居中

CSS 课堂笔记：多行省略号 & 垂直居中

一、多行文本溢出显示省略号（-webkit-line-clamp）

1. 核心属性组合（缺一不可）

属性	值	作用
display	-webkit-box	启动旧版弹性盒模型，为多行截断提供布局基础
-webkit-box-orient	vertical	强制内部文本沿垂直方向排列（竖着排）
-webkit-line-clamp	3（或其他数字）	限制最多显示 3 行，超出部分直接裁剪
overflow	hidden	配合 line-clamp，把超出的行隐藏掉
text-overflow	ellipsis	在裁剪位置显示 … 省略号

2. 重要注意点

• -webkit-line-clamp 是非标准属性，但 Chrome、Safari、Edge 等主流浏览器都已广泛支持，可以放心用。
• 必须同时设置 display: -webkit-box 和 -webkit-box-orient: vertical，否则 line-clamp 不会生效。
• 省略号 … 通常只出现在最后一行末尾，不会每行都加。
• 适用场景：新闻摘要、文章简介、商品描述等需要限制字数的多行文本区域。

3. 常见误区

• 如果只设 overflow: hidden 和 text-overflow: ellipsis，那是单行省略效果，多行必须加上 -webkit-line-clamp。
• 父容器不能设置 height 固定值，否则可能影响截断计算，建议用 max-height 或让内容自适应。

二、底部区域（.bottom）与垂直居中

1. 水平居中（text-align: center）

• text-align: center 作用于块级容器内的内联内容（文本、图片、行内元素）。
• 容器内的文本或行内元素会在水平方向居中显示。

2. 垂直居中的三种常用方法

方法	适用场景	核心原理	优缺点
行高法	单行文本	line-height 等于容器 height	简单粗暴，但仅限单行，多行会溢出
弹性盒法	单行 / 多行	display: flex + align-items: center	兼容性好，自动适应内容高度，推荐使用
内边距法	固定高度容器	上下 padding 强制撑开留白	需手动计算 padding 值，容器高度固定时内容多会撑破

3. 各方法细节补充

• 行高法：当容器 height: 200px 时，设置 line-height: 200px，单行文字会垂直居中。但若内容换行或有多行，会错位。
• 弹性盒法：设置 display: flex 后，align-items: center 让所有子项在交叉轴（垂直方向）居中。适用于单行或多行文本，也适合包含多个子元素的复杂布局。
• 内边距法：如 padding-top: 150px; padding-bottom: 150px;，通过上下内边距把内容挤到中间。但需注意：如果容器 height 固定，内容总高度 = padding上下 + 内容高度，可能会超出容器，需要重新计算。

三、课堂易错点总结

1. 多行省略号 必须四件套全写：display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: N + overflow: hidden，缺一不可。
2. text-overflow: ellipsis 只负责加省略号，不负责裁剪，裁剪靠 overflow: hidden 和 line-clamp 配合。
3. 垂直居中 优先推荐弹性盒法（flex + align-items: center），适用范围最广，不用担心单行多行问题。
4. 行高法 只适合确定只有一行文本的场景，多行文本不要用。
5. 如果容器内既有文本又有其他元素（如图片、按钮），弹性盒法依然好用，align-items: center 会让它们在垂直方向整体居中。