溢出处理（解决内容超出容器的问题）

16.1 溢出属性（overflow）

定义

控制当内容超出元素容器时的显示方式。

语法

css

元素 {
  overflow: 处理方式;
}

常用值

visible：默认值，内容超出部分可见
hidden：超出部分隐藏
scroll：显示滚动条
auto：自动判断，超出时显示滚动条

示例

css

/* 隐藏溢出内容 */
.hidden-overflow {
  overflow: hidden;
}

/* 显示滚动条 */
.scroll-box {
  overflow: scroll;
}

/* 自动判断 */
.auto-overflow {
  overflow: auto;
}

16.2 水平溢出和垂直溢出

overflow-x（水平溢出）

定义：单独控制水平方向的溢出处理。

语法：

css

元素 {
  overflow-x: 处理方式;
}

overflow-y（垂直溢出）

定义：单独控制垂直方向的溢出处理。

语法：

css

元素 {
  overflow-y: 处理方式;
}

示例

css

/* 水平滚动，垂直隐藏 */
.horizontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 垂直滚动，水平隐藏 */
.vertical-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

16.3 文本溢出处理

text-overflow（文本省略）

定义：设置文本溢出时的显示方式。

单行文本省略

语法：

css

.single-line {
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 隐藏溢出 */
  text-overflow: ellipsis;  /* 显示省略号 */
}

多行文本省略

语法：

css

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;    /* 显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

示例

css

/* 单行省略 */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

/* 多行省略 */
.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

16.4 新手避坑

overflow:hidden与定位、浮动的兼容性问题

问题描述：当父元素设置 overflow: hidden 时，可能会影响子元素的定位效果。

解决方案：

使用 position: relative 配合 overflow: hidden
使用 transform 代替 position 进行定位

示例：

css

.parent {
  position: relative;
  overflow: hidden;
}

.child {
  position: absolute;
  top: -10px;
  right: -10px;
}

16.5 实战：制作文本省略、带滚动条的容器

实战目标

创建文本省略效果和带滚动条的容器。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS溢出处理实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS溢出处理实战</h1>
    
    <!-- 单行文本省略 -->
    <section class="demo-section">
      <h2>单行文本省略</h2>
      <div class="ellipsis-box">
        这是一段很长的文本，当超出容器宽度时会显示省略号...
      </div>
    </section>
    
    <!-- 多行文本省略 -->
    <section class="demo-section">
      <h2>多行文本省略</h2>
      <div class="multi-line-box">
        这是多行文本示例。当文本内容超过指定的行数时，会显示省略号。
        这是第二行文本内容。
        这是第三行文本内容。
        这是第四行文本内容，应该被隐藏。
      </div>
    </section>
    
    <!-- 带滚动条的容器 -->
    <section class="demo-section">
      <h2>带滚动条的容器</h2>
      <div class="scroll-box">
        <p>这是可滚动容器中的内容...</p>
        <p>更多内容...</p>
        <p>继续添加内容...</p>
        <p>还有很多内容...</p>
        <p>滚动查看更多...</p>
        <p>最后一行内容...</p>
      </div>
    </section>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-section h2 {
  color: #555;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

/* 单行文本省略 */
.ellipsis-box {
  width: 300px;
  padding: 15px;
  background-color: #e3f2fd;
  border-radius: 8px;
  
  /* 文本省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本省略 */
.multi-line-box {
  width: 300px;
  padding: 15px;
  background-color: #fff3e0;
  border-radius: 8px;
  line-height: 1.6;
  
  /* 多行省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 带滚动条的容器 */
.scroll-box {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: #f3e5f5;
  border-radius: 8px;
  overflow: auto;
}

.scroll-box p {
  margin-bottom: 15px;
  color: #666;
}

/* 自定义滚动条样式 */
.scroll-box::-webkit-scrollbar {
  width: 8px;
}

.scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

单行文本省略：超出宽度的文本显示省略号
多行文本省略：超过3行的文本显示省略号
带滚动条的容器：内容超出高度时显示滚动条

溢出处理（解决内容超出容器的问题） ​

16.1 溢出属性（overflow） ​

定义 ​

语法 ​

常用值 ​

示例 ​

16.2 水平溢出和垂直溢出 ​

overflow-x（水平溢出） ​

overflow-y（垂直溢出） ​

示例 ​

16.3 文本溢出处理 ​

text-overflow（文本省略） ​

单行文本省略 ​

多行文本省略 ​

示例 ​

16.4 新手避坑 ​

overflow:hidden与定位、浮动的兼容性问题 ​

16.5 实战：制作文本省略、带滚动条的容器 ​

实战目标 ​

实战步骤 ​

预期效果 ​

溢出处理（解决内容超出容器的问题）

16.1 溢出属性（overflow）

定义

语法

常用值

示例

16.2 水平溢出和垂直溢出

overflow-x（水平溢出）

overflow-y（垂直溢出）

示例

16.3 文本溢出处理

text-overflow（文本省略）

单行文本省略

多行文本省略

示例

16.4 新手避坑

overflow:hidden与定位、浮动的兼容性问题

16.5 实战：制作文本省略、带滚动条的容器

实战目标

实战步骤

预期效果