课堂笔记

课堂笔记

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

属性/规则	值/说明	作用
display: -webkit-box	旧版弹性盒模型	为多行文本截断提供布局基础（兼容 WebKit 内核浏览器）
-webkit-box-orient: vertical	垂直排列	内部子元素（文本行）沿垂直方向排列
-webkit-line-clamp: 3	3 行	限制块容器最多显示 3 行文本，超出部分裁剪
overflow: hidden	隐藏溢出	配合 line-clamp 将超出的行隐藏
text-overflow: ellipsis	省略号	在裁剪处显示 …（通常只在最后一行末尾显示）

注意：

• -webkit-line-clamp 是非标准属性，但已被所有主流浏览器（WebKit/Blink 内核）广泛支持。
• 必须同时设置 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效。
• 适用于多行文本（如新闻摘要、文章简介）的优雅截断。

---

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

样式

css

.bottom {
  margin: 0 auto;
  width: 600px;
  height: 200px;
  border: 5px solid blue;
  text-align: center;   /* 水平居中（对行内/内联内容） */
  /* 垂直居中方法（注释部分） */
  /* 方法1：单行 line-height */
  /* line-height: 200px; */
  /* 方法2：弹性盒（多行） */
  /* display: flex; align-items: center; */
  /* 方法3：上下内边距（多行） */
  padding-top: 150px;
  padding-bottom: 150px;
}

知识点拆解

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

• 作用于块级元素内的内联内容（文本、图片、行内元素）。
• 本例中文本 “2536110318<br>” 会水平居中。

2. 垂直居中的三种常见方法（代码中以注释呈现，但知识点重要）

方法	适用场景	关键代码	优缺点
行高法	单行文本	line-height: 200px	简单，但仅限单行
弹性盒法	单行/多行	display: flex; align-items: center;	兼容性好，自适应高度
内边距法	固定高度容器	padding-top: 150px; padding-bottom: 150px;	强制上下留白，但容器总高度需重新计算（若 height 固定，内容会撑高）