当前位置： 首页 > article >正文

CSS 溢出内容处理：从基础到实战

article 2026/5/8 3:49:14

CSS 溢出内容处理：从基础到实战

    • 1. 什么是溢出？
      • 示例代码：默认溢出行为
    • 2. 使用 `overflow` 属性控制溢出
      • 2.1 使用 `overflow: hidden` 裁剪内容
        • 示例代码：裁剪溢出内容
      • 2.2 使用 `overflow: scroll` 显示滚动条
        • 示例代码：显示滚动条
      • 2.3 使用 `overflow: auto` 自动显示滚动条
        • 示例代码：自动显示滚动条
      • 2.4 使用 `overflow-x` 和 `overflow-y` 分别控制水平和垂直溢出
        • 示例代码：分别控制水平和垂直溢出
    • 3. 溢出与块级格式化上下文（BFC）
      • 示例代码：BFC 的效果
    • 4. 处理长单词和文本溢出
      • 4.1 使用 `word-break` 断词
        • 示例代码：断词处理
      • 4.2 使用 `overflow-wrap` 换行
        • 示例代码：换行处理
    • 5. 总结
      • 完整示例代码

在网页设计中，内容溢出是一个常见的问题。当盒子中的内容超出其设定的尺寸时，就会发生溢出。CSS 提供了多种方式来处理溢出内容，本文将详细介绍这些方法，并通过示例代码帮助你更好地理解和应用。

1. 什么是溢出？

在 CSS 中，每个元素都可以看作是一个盒子。当我们为盒子设置了固定的宽度和高度时，如果内容超出了这个尺寸，就会发生溢出。默认情况下，溢出的内容会显示在盒子外部，这可能会导致页面布局混乱。

示例代码：默认溢出行为

<div class="box"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p>
</div>

.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;
}

在这个例子中，.box 的宽度和高度被固定为 200px 和 100px，而内容超出了这个尺寸，导致内容溢出。

2. 使用 overflow 属性控制溢出

CSS 提供了 overflow 属性来控制内容的溢出行为。overflow 属性有以下几个常用值：

  • visible：默认值，内容不会被裁剪，会显示在盒子外部。
  • hidden：溢出的内容会被裁剪，不会显示。
  • scroll：无论内容是否溢出，都会显示滚动条。
  • auto：仅在内容溢出时显示滚动条。

2.1 使用 overflow: hidden 裁剪内容

如果你希望溢出的内容被裁剪掉，可以使用 overflow: hidden。

示例代码：裁剪溢出内容
.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;overflow: hidden;
}

在这个例子中，超出 .box 尺寸的内容将被裁剪掉，不会显示在盒子外部。

2.2 使用 overflow: scroll 显示滚动条

如果你希望在内容溢出时显示滚动条，可以使用 overflow: scroll。

示例代码：显示滚动条
.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;overflow: scroll;
}

在这个例子中，无论内容是否溢出，.box 都会显示滚动条。

2.3 使用 overflow: auto 自动显示滚动条

如果你希望仅在内容溢出时显示滚动条，可以使用 overflow: auto。

示例代码：自动显示滚动条
.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;overflow: auto;
}

在这个例子中，只有当内容溢出时，.box 才会显示滚动条。

2.4 使用 overflow-x 和 overflow-y 分别控制水平和垂直溢出

你可以使用 overflow-x 和 overflow-y 分别控制水平和垂直方向上的溢出行为。

示例代码：分别控制水平和垂直溢出
.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;overflow-x: hidden;overflow-y: scroll;
}

在这个例子中，水平方向上的溢出内容将被裁剪，而垂直方向上的溢出内容将显示滚动条。

3. 溢出与块级格式化上下文（BFC）

当使用 overflow 属性的值为 scroll 或 auto 时，会创建一个新的块级格式化上下文（Block Formatting Context，BFC）。BFC 是一个独立的渲染区域，内部的元素不会影响外部的布局。

示例代码：BFC 的效果

.container {overflow: auto;border: 2px solid black;padding: 10px;
}.box {width: 200px;height: 100px;border: 2px solid red;margin-bottom: 20px;
}

<div class="container"><div class="box"></div><div class="box"></div>
</div>

在这个例子中，.container 创建了一个 BFC，内部的 .box 元素不会影响外部的布局。

4. 处理长单词和文本溢出

当盒子中包含长单词或长文本时，可能会导致内容溢出。你可以使用 word-break 或 overflow-wrap 属性来处理这种情况。

4.1 使用 word-break 断词

word-break 属性用于控制长单词的断词行为。

示例代码：断词处理
.box {width: 200px;border: 2px solid black;padding: 10px;word-break: break-all;
}

在这个例子中，长单词会在必要时断词，以适应盒子的宽度。

4.2 使用 overflow-wrap 换行

overflow-wrap 属性用于控制长单词的换行行为。

示例代码：换行处理
.box {width: 200px;border: 2px solid black;padding: 10px;overflow-wrap: break-word;
}

在这个例子中，长单词会在必要时换行，以适应盒子的宽度。

5. 总结

通过本文的学习，你应该已经掌握了如何使用 CSS 处理内容溢出的问题。无论是通过裁剪内容、显示滚动条，还是通过断词和换行来处理长文本，CSS 都提供了灵活的方式来控制溢出行为。

完整示例代码

<!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>.box {width: 200px;height: 100px;border: 2px solid black;padding: 10px;margin-bottom: 20px;}.hidden {overflow: hidden;}.scroll {overflow: scroll;}.auto {overflow: auto;}.word-break {word-break: break-all;}.overflow-wrap {overflow-wrap: break-word;}</style>
</head>
<body><div class="box hidden"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p></div><div class="box scroll"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p></div><div class="box auto"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p></div><div class="box word-break"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p></div><div class="box overflow-wrap"><p>这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。这是一个超出盒子尺寸的内容示例。</p></div>
</body>
</html>

通过本文的学习，你应该能够熟练使用 CSS 处理内容溢出的问题。

相关文章：

CSS 溢出内容处理：从基础到实战

CSS 溢出内容处理&#xff1a;从基础到实战 1. 什么是溢出&#xff1f;示例代码&#xff1a;默认溢出行为 2. 使用 overflow 属性控制溢出2.1 使用 overflow: hidden 裁剪内容示例代码&#xff1a;裁剪溢出内容 2.2 使用 overflow: scroll 显示滚动条示例代码&#xff1a;显示滚…...

编程日记 2026/5/2 13:24:37

嵌入式知识点总结 操作系统 专题提升(四)-上下文

针对于嵌入式软件杂乱的知识点总结起来&#xff0c;提供给读者学习复习对下述内容的强化。 目录 1.上下文有哪些?怎么理解? 2.为什么会有上下文这种概念? 3.什么情况下进行用户态到内核态的切换? 4.中断上下文代码中有哪些注意事项&#xff1f; 5.请问线程需要保存哪些…...

编程日记 2026/5/3 15:41:04

Elasticsearch基本使用详解

文章目录 Elasticsearch基本使用详解一、引言二、环境搭建1、安装 Elasticsearch2、安装 Kibana&#xff08;可选&#xff09; 三、索引操作1、创建索引2、查看索引3、删除索引 四、数据操作1、插入数据2、查询数据&#xff08;1&#xff09;简单查询&#xff08;2&#xff09;…...

编程日记 2026/5/6 17:41:27

携程Android开发面试题及参考答案

在项目中，给别人发的动态点赞功能是如何实现的？ 数据库设计：首先要在数据库中为动态表添加一个点赞字段，用于记录点赞数量，同时可能需要一个点赞关系表，记录用户与动态之间的点赞关联，包括点赞时间等信息。界面交互：在 Android 界面上，为点赞按钮设置点击事件监听器。…...

编程日记 2026/4/1 4:08:12

xxl-job 在 Java 项目的使用 以一个代驾项目中的订单模块举例

能搜到这里的最起码一定知道 xxl-job 是用来干什么的&#xff0c;我就不多啰嗦怎么下载以及它的历史了 首先我们要知道 xxl-job 这个框架的结构&#xff0c;如下图&#xff1a; xxl-job-master&#xff1a;xxl-job-admin&#xff1a;调度中心xxl-job-core&#xff1a;公共依赖…...

编程日记 2026/5/8 3:02:21

Alibaba开发规范_异常日志之日志规约：最佳实践与常见陷阱

文章目录 引言1. 使用SLF4J日志门面规则解释代码示例正例反例 2. 日志文件的保存时间规则解释 3. 日志文件的命名规范规则解释代码示例正例反例 4. 使用占位符进行日志拼接规则解释代码示例正例反例 5. 日志级别的开关判断规则解释代码示例正例反例 6. 避免重复打印日志规则解释…...

编程日记 2026/5/3 22:31:41

【数据分析】案例03：当当网近30日热销图书的数据采集与可视化分析（scrapy+openpyxl+matplotlib）

当当网近30日热销图书的数据采集与可视化分析（scrapy+openpyxl+matplotlib） 当当网近30日热销书籍官网写在前面 实验目的：实现当当网近30日热销图书的数据采集与可视化分析。 电脑系统：Windows 使用软件：Visual Studio Code Python版本：python 3.12.4 技术需求：scrapy、…...

编程日记 2026/3/6 6:47:36

需求分析应该从哪些方面来着手做？

需求分析一般可从以下几个方面着手&#xff1a; 业务需求方面 - 与相关方沟通&#xff1a;与业务部门、客户等进行深入交流&#xff0c;通过访谈、问卷调查、会议讨论等方式&#xff0c;明确他们对项目的期望、目标和整体业务需求&#xff0c;了解项目要解决的业务问题及达成的…...

编程日记 2026/2/13 15:51:20

申博经验贴

1. 所谓申博&#xff0c;最重要的就是定制的海投 分成两个部分 1. 定制 要根据每个教授去写不同的&#xff0c;一定不要泛泛的去写&#xff0c;一定要非常非常的具体&#xff0c;要引起教授的兴趣。每个教授每天都会收到几十封邮件&#xff0c;所以要足够的引起教授的注意&a…...

编程日记 2026/4/28 0:47:36

SpringAI 人工智能

随着 AI 技术的不断发展&#xff0c;越来越多的企业开始将 AI 模型集成到其业务系统中&#xff0c;从而提升系统的智能化水平、自动化程度和用户体验。在此背景下&#xff0c;Spring AI 作为一个企业级 AI 框架&#xff0c;提供了丰富的工具和机制&#xff0c;可以帮助开发者将…...

编程日记 2026/2/20 10:02:52

虚幻基础17：动画层接口

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 animation layer interface animation layer interface 动画层接口&#xff1a;动画图表的集。仅有名字。 添加到动画蓝图中&#xff0c;由动画蓝图实现动画图表。...

编程日记 2026/2/23 20:59:24

SQLAlchemy 2.0的简单使用教程

SQLAlchemy 2.0相比1.x进行了很大的更新&#xff0c;目前网上的教程不多&#xff0c;以下以链接mysql为例介绍一下基本的使用方法 环境及依赖 Python:3.8 mysql:8.3 Flask:3.0.3 SQLAlchemy:2.0.37 PyMySQL:1.1.1使用步骤 1、创建引擎&#xff0c;链接到mysql engine crea…...

编程日记 2026/5/5 19:54:55

Codeforces Round 1002 (Div. 2) A-D

复活&#xff01;年后首场&#xff01;本期封面是我自己AI弄的图 A - Milya and Two Arrays 题意 给两个所有数字出现次数都大于2的数组&#xff0c;问能不能修改排序之后对应位置相加得到新的数组使不同数字个数达到3 思路 直接计数就行了&#xff0c;不同的数字匹配一下…...

编程日记 2026/3/25 10:36:08

OpenGL学习笔记（七）：Camera 摄像机（视图变换、LookAt矩阵、Camera类的实现）

文章目录 摄像机/观察空间/视图变换LookAt矩阵移动相机&#xff08;处理键盘输入&#xff09;移动速度欧拉角移动视角&#xff08;处理鼠标输入&#xff09;缩放场景&#xff08;处理滚轮输入&#xff09;Camera类 摄像机/观察空间/视图变换 在上一节变换中&#xff0c;我们讨…...

编程日记 2026/5/2 14:48:23

『VUE』vue-quill-editor富文本编辑器添加按钮houver提示（详细图文注释）

目录 预览效果新建一个config.js存放标题编写添加提示的方法调用添加标题方法的生命周期总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 预览效果 新建一个config.js存放标题 export const titleConfig [{ Choice: .ql-bold…...

编程日记 2026/4/29 17:47:29

如何使用 DeepSeek 和 Dexscreener 构建免费的 AI 加密交易机器人？

我使用DeepSeek AI和Dexscreener API构建的一个简单的 AI 加密交易机器人实现了这一目标。在本文中&#xff0c;我将逐步指导您如何构建像我一样的机器人。 DeepSeek 最近发布了R1&#xff0c;这是一种先进的 AI 模型。您可以将其视为 ChatGPT 的免费开源版本&#xff0c;但增加…...

编程日记 2026/5/7 12:07:09

Kafka流式计算架构

引言 Kafka 凭借其卓越的架构设计&#xff0c;具备极为高效的流式计算能力&#xff0c;在海量数据环境下&#xff0c;依然能够以惊人的速度实现消息的高性能消费&#xff0c;轻松应对高并发、低延迟的严苛业务需求。无论是实时数据处理、复杂事件分析&#xff0c;还是大规模数…...

编程日记 2026/3/12 20:21:32

C++泛型编程06（默认模板实参）

文章目录 1.4 默认模板实参 (Default Template Arguments)示例&#xff1a;灵活定义返回类型 当然&#xff0c;这里是对关于默认模板实参(Default Template Arguments)的内容进行了改进和优化后的叙述&#xff1a; 1.4 默认模板实参 (Default Template Arguments) 在C中&…...

编程日记 2026/5/5 0:06:32

微信登录模块封装

文章目录 1.资质申请2.combinations-wx-login-starter1.目录结构2.pom.xml 引入okhttp依赖3.WxLoginProperties.java 属性配置4.WxLoginUtil.java 后端通过 code 获取 access_token的工具类5.WxLoginAutoConfiguration.java 自动配置类6.spring.factories 激活自动配置类 3.com…...

编程日记 2026/4/29 21:16:41

SRS代码目录

代码目录&#xff1a; src/目录下核心代码&#xff1a; core&#xff1a;核心功能模块&#xff0c;包括日志、配置、错误处理等&#xff1b;protocol&#xff1a;实现RTMP、HTTP-FLV、HLS等协议的模块&#xff1b;app&#xff1a;应用层的实现&#xff0c;包括流的发布、播放…...

编程日记 2026/5/4 8:45:00

C++STL（一）——string类

目录 一、string的定义方式二、 string类对象的容量操作三、string类对象的访问及遍历操作四、string类对象的修改操作五、string类非成员函数 一、string的定义方式 string是个管理字符数组的类&#xff0c;其实就是字符数组的顺序表。 它的接口也是非常多的。本章介绍一些常…...

编程日记 2026/2/21 18:04:54

机器学习--1.KNN机器学习入门

1、机器学习概述 1.1、什么是机器学习 机器学习&#xff08;Machine Learning&#xff09;是人工智能&#xff08;Artificial Intelligence&#xff09;领域的一个子集&#xff0c;它主要关注如何让计算机系统通过经验学习&#xff08;数据&#xff09;并自动改进性能。机器学…...

编程日记 2026/4/29 17:45:53

Adaptive LLM Transformer²

看到了一个不错的论文https://arxiv.org/pdf/2501.06252 TRANSFORMER-SQUARED: SELF-ADAPTIVE LLMS 挺有意思的&#xff0c;是一家日本AI公司SakanaAI的论文&#xff08;我以前写过他们的不训练提升模型的能力的文章&#xff0c;感兴趣可以去翻&#xff09;它家有Lion Jones坐镇…...

编程日记 2026/5/6 5:46:36

三路排序算法

三路排序算法 引言 排序算法是计算机科学中基础且重要的算法之一。在数据分析和处理中&#xff0c;排序算法的效率直接影响着程序的执行速度和系统的稳定性。本文将深入探讨三路排序算法&#xff0c;包括其原理、实现和应用场景。 一、三路排序算法的原理 三路排序算法是一…...

编程日记 2026/2/21 16:29:58

代码随想录day27

669. /** lc appleetcode.cn id669 langcpp** [669] 修剪二叉搜索树*/// lc codestart /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}…...

编程日记 2026/2/19 21:13:53

基于LabVIEW的Modbus-RTU设备通信失败问题分析与解决

在使用 LabVIEW 通过 Modbus-RTU 协议与工业设备进行通信时&#xff0c;可能遇到无法正常发送或接收指令的问题。常见原因包括协议参数配置错误、硬件连接问题、数据帧格式不正确等。本文以某 RGBW 控制器调光失败为例&#xff0c;提出了一种通用的排查思路&#xff0c;帮助开发…...

编程日记 2026/5/6 19:41:25

1. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--前言

在我们的专栏《单体开发》中&#xff0c;我们实现了一个简单的记账软件的服务端&#xff0c;并且成功上线。随着用户数量的不断增长&#xff0c;问题逐渐开始显现。访问量逐渐增加&#xff0c;服务端的压力也随之加大。随着访问量的攀升&#xff0c;服务端的响应时间变得越来越…...

编程日记 2026/2/21 15:32:47

直方图：摄影中的视觉数据指南

目录 一、直方图基础&#xff1a;揭开它的神秘面纱 二、解读直方图类型&#xff1a;亮度与色彩的密码 &#xff08;一&#xff09;亮度直方图 &#xff08;二&#xff09;RGB 直方图 三、拍摄中巧用直方图&#xff1a;优化曝光与效果 &#xff08;一&#xff09;精准判断曝…...

编程日记 2026/5/3 13:04:21

一份完整系统化提升信息输出密度与逻辑严谨性的训练素材

一、方法 1. 理论基础与核心概念 1.1 信息输出密度 定义 信息输出密度可以理解为单位表达中所包含的有效信息量。它要求在有限的篇幅或时间内传递更多有价值、低冗余的信息。衡量指标 信息熵&#xff08;Shannon Entropy&#xff09;&#xff1a;在信息论中&#xff0c;信息…...

编程日记 2026/2/19 18:23:54

CommonJS 和 ES6module 的区别

动态与静态 CommonJS 与 ES6 Module 最本质的区别在于前者对模块依赖的解决是“动态的”&#xff0c;而后者是“静态的”。在这里“动态”的含义是&#xff0c;模块依赖关系的建立发生在代码运行阶段&#xff1a;而“静态”则表示模块依赖关系的建立发生在代码编译阶段。 看一…...

编程日记 2026/5/4 22:06:40