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

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

news 2026/5/13 23:47:52

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;显示滚…...

编程日记 2025/2/4 14:20:03

Spring Boot项目如何使用MyBatis实现分页查询

写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油&#xff0c;冲鸭&#x…...

编程日记 2025/2/4 14:17:59

飞行汽车中的无刷外转子电机、人形机器人中的无框力矩电机技术解析与应用

重点:无刷外转子电机与无框力矩电机&#xff1a;技术解析与应用对比 在现代工业自动化和精密机械领域&#xff0c;无刷电机因其高效、低噪音和高可靠性而备受青睐。其中&#xff0c;无刷外转子电机和无框力矩电机更是以其独特的结构和性能特点&#xff0c;成为众多应用场景中的…...

编程日记 2025/2/4 14:14:54

FreeRTOS学习 --- 队列集

队列集简介 一个队列只允许任务间传递的消息为同一种数据类型&#xff0c;如果需要在任务间传递不同数据类型的消息时&#xff0c;那么就可以使用队列集 &#xff01; 作用&#xff1a;用于对多个队列或信号量进行“监听”&#xff0c;其中不管哪一个消息到来&#xff0c;都可让…...

编程日记 2025/2/4 14:12:52

【R语言】R语言安装包的相关操作

一、管理R语言安装包 1、安装R包 install.packages() 2、查看已安装的R包 installed.packages() 3、更新R包 update.packages() 4、卸载R包 remove.packages() 二、加载R语言安装包 打开R语言时&#xff0c;基础包&#xff08;base包&#xff09;会自动被加载到内存中…...

编程日记 2025/2/4 14:11:51

15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)

完整代码 01_网易云-header <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…...

编程日记 2025/2/4 14:10:49

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;1.登录-持久层 &…...

编程日记 2025/2/4 14:08:46

测试方案和测试计划相同点和不同点

在软件测试领域&#xff0c;测试方案与测试计划皆为举足轻重的关键文档&#xff0c;尽管它们有着紧密的关联&#xff0c;但在目的与内容层面存在着显著的差异。相同点&#xff1a; 1.共同目标&#xff1a;测试方案和测试计划的核心目标高度一致&#xff0c;均致力于保障软件的…...

编程日记 2025/2/4 14:07:45

c++提取矩形区域图像的梯度并拟合直线

c提取旋转矩形区域的边缘最强梯度点&#xff0c;并拟合直线 #include <opencv2/opencv.hpp> #include <iostream> #include <vector>using namespace cv; using namespace std;int main() {// 加载图像Mat img imread("image.jpg", IMREAD_GRAYS…...

编程日记 2025/2/4 14:04:40

Unity Shader Graph 2D - 角色身体电流覆盖效果

在游戏中，通常会有游戏角色受到“电击”的效果，此时游戏角色身体上会覆盖有电流，该效果能表明游戏角色的当前状态，让玩家能够获得更直观更好的体验。 那么如何实现呢 首先创建一个ShaderGraph文件，命名为Current，再创建对应的材质球M_Current。 基础的资源显示 老规矩，…...

编程日记 2025/2/4 14:01:34

【LLM-agent】(task4)搜索引擎Agent

note 新增工具&#xff1a;搜索引擎Agent 文章目录 note一、搜索引擎AgentReference 一、搜索引擎Agent import os from dotenv import load_dotenv# 加载环境变量 load_dotenv() # 初始化变量 base_url None chat_model None api_key None# 使用with语句打开文件&#xf…...

编程日记 2025/2/4 13:58:32

携程Java开发面试题及参考答案 （200道-下）

insert 一行数据的时候加的是什么锁？为什么？ 在 MySQL 中，当执行 INSERT 操作插入一行数据时，加锁的情况会因存储引擎和具体的事务隔离级别而有所不同。一般来说，在 InnoDB 存储引擎下，INSERT 操作加的是行级排他锁（Row Exclusive Lock），以下详细说明原因。 行级排他…...

编程日记 2025/2/4 13:55:28

GWO优化SVM回归预测matlab

灰狼优化算法&#xff08;Grey Wolf Optimizer&#xff0c;简称 GWO&#xff09;&#xff0c;是由澳大利亚格里菲斯大学的 Mirjalii 等人于 2014 年提出的群智能优化算法。该算法的设计灵感源自灰狼群体的捕食行为&#xff0c;核心思想是对灰狼社会的结构与行为模式进行模仿。 …...

编程日记 2025/2/4 13:51:25

QMK启用摇杆和鼠标按键功能

虽然选择了触摸屏&#xff0c;我仍选择为机械键盘嵌入摇杆模块&#xff0c;这本质上是对"操作连续性"的执着。   值得深思的是&#xff0c;本次开发过程中借助DeepSeek的代码生成与逻辑推理&#xff0c;其展现的能力已然颠覆传统编程范式&#xff0c;需求描述可自动…...

编程日记 2025/2/4 13:50:23

Unity实现按键设置功能代码

一、前言 最近在学习unity2D&#xff0c;想做一个横版过关游戏&#xff0c;需要按键设置功能&#xff0c;让用户可以自定义方向键与攻击键等。 自己写了一个&#xff0c;总结如下。 二、界面效果图 这个是一个csv文件&#xff0c;准备第一列是中文按键说明&#xff0c;第二列…...

编程日记 2025/2/4 13:48:21

基于物联网技术的实时数据流可视化研究（论文+源码）

1系统方案设计 根据系统功能的设计要求&#xff0c;展开基于物联网技术的实时数据流可视化研究设计。如图2.1所示为系统总体设计框图&#xff0c;系统以STM32单片机做为主控制器&#xff0c;通过DHT11、MQ-2、光照传感器实现环境中温湿度、烟雾、光照强度数据的实时检测&#x…...

编程日记 2025/2/4 13:47:19

list容器（详解）

1. list的介绍及使用 1.1 list的介绍&#xff08;双向循环链表&#xff09; https://cplusplus.com/reference/list/list/?kwlist&#xff08;list文档介绍&#xff09; 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭…...

编程日记 2025/2/4 13:44:16

Elasticsearch基本使用详解

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

编程日记 2025/2/4 13:40:10

17.3.4 颜色矩阵

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 17.3.4.1 矩阵基本概念 矩阵&#xff08;Matrix&#xff09;是一个按照长方阵列排列的复数或实数集合&#xff0c;类似于数组。 由…...

编程日记 2025/2/4 13:39:09

FPGA 时钟多路复用

时钟多路复用 您可以使用并行和级联 BUFGCTRL 的组合构建时钟多路复用器。布局器基于时钟缓存 site 位置可用性查找最佳布局。 如果可能&#xff0c;布局器将 BUFGCTRL 布局在相邻 site 位置中以利用专用级联路径。如无法实现&#xff0c;则布局器将尝试将 BUFGCTRL 从…...

编程日记 2025/2/4 13:37:07

3款精选工具：重新定义你的星露谷物语体验

3款精选工具&#xff1a;重新定义你的星露谷物语体验 【免费下载链接】StardewMods Mods for Stardew Valley using SMAPI. 项目地址: https://gitcode.com/gh_mirrors/st/StardewMods 你是否曾在《星露谷物语》中为重复性的农场劳作感到疲惫&#xff1f;是否因为繁琐的…...

编程新知 2026/5/13 21:33:26

OpenClaw机械爪MuJoCo仿真沙盒：从算法验证到仿真到现实迁移

1. 项目概述&#xff1a;一个为开源机械爪打造的“数字沙盘”如果你对机器人、开源硬件或者DIY自动化项目感兴趣&#xff0c;最近可能听说过“OpenClaw”这个名字。它是一款设计精巧、成本可控的开源机械爪&#xff0c;社区里不少爱好者都在用它来搭建自己的机器人手臂或者自动…...

编程新知 2026/5/13 20:51:43

颠覆性网络拓扑可视化：基于Vue+SVG的一站式轻量级解决方案

颠覆性网络拓扑可视化&#xff1a;基于VueSVG的一站式轻量级解决方案 【免费下载链接】easy-topo vuesvgelement-ui 快捷画出网络拓扑图 项目地址: https://gitcode.com/gh_mirrors/ea/easy-topo 在复杂的网络架构设计和运维管理中&#xff0c;网络工程师和开发人员经常…...

编程新知 2026/5/13 19:35:31

通过MCP协议用AI助手管理OVH云资源：ovh-api-mcp项目实战

1. 项目概述&#xff1a;一个连接MCP与OVH云的桥梁 最近在折腾一些自动化运维和云资源管理的活儿&#xff0c;发现了一个挺有意思的开源项目&#xff1a; davidlandais/ovh-api-mcp 。简单来说&#xff0c;这是一个 Model Context Protocol (MCP) 服务器 &#xff0c;专门…...

编程新知 2026/5/13 17:40:33

基于MCP协议与Playwright构建AI浏览器自动化服务器

1. 项目概述&#xff1a;当AI助手学会“动手”&#xff0c;一个浏览器自动化MCP服务器的诞生如果你和我一样&#xff0c;日常重度依赖Claude、Cursor这类AI编程助手&#xff0c;那你肯定遇到过这样的场景&#xff1a;你正和AI热烈地讨论一个技术方案&#xff0c;突然需要它帮你…...

编程新知 2026/5/13 17:09:38

5分钟搞定B站视频数据分析：让数据采集变得像点外卖一样简单

5分钟搞定B站视频数据分析&#xff1a;让数据采集变得像点外卖一样简单 【免费下载链接】Bilivideoinfo Bilibili视频数据爬虫 精确爬取完整的b站视频数据&#xff0c;包括标题、up主、up主id、精确播放数、历史累计弹幕数、点赞数、投硬币枚数、收藏人数、转发人数、发布时间、…...

编程新知 2026/5/13 16:56:10

别再IO模拟SPI了！STM32F103驱动AD9833信号发生器，库函数SPI配置避坑全记录

STM32硬件SPI驱动AD9833信号发生器的深度避坑指南 在嵌入式开发中&#xff0c;SPI通信是最常用的外设接口之一。许多开发者习惯使用GPIO模拟SPI时序&#xff0c;认为这样更灵活可控。但当我们面对AD9833这类对时序要求严格的芯片时&#xff0c;IO模拟的弊端就会暴露无遗——信号…...

编程新知 2026/5/13 16:42:57

C# Winform高效分页实践：SunnyUI uiPagination控件详解与数据绑定

1. 初识SunnyUI uiPagination控件 第一次接触SunnyUI的uiPagination控件是在开发一个订单管理系统时。当时客户抱怨系统加载5000多条记录时会卡顿近10秒&#xff0c;我试过各种传统分页方案都不够理想&#xff0c;直到发现了这个宝藏控件。它就像Winform界的"瑞士军刀&quo…...

编程新知 2026/5/13 16:13:53

基于MCP协议的制药研发智能数据管道：架构、部署与应用

1. 项目概述&#xff1a;当制药研发遇上智能数据管道如果你在制药行业或者生物科技领域待过&#xff0c;哪怕只是边缘岗位&#xff0c;也一定对“数据孤岛”和“信息滞后”这两个词深恶痛绝。新药研发的每个环节——从靶点发现、化合物筛选、临床前研究到临床试验——都在源源不…...

编程新知 2026/5/13 15:32:56

3种高效方案：让Windows直接运行Android应用的全新体验手册

3种高效方案&#xff1a;让Windows直接运行Android应用的全新体验手册 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 想象一下这样的场景&#xff1a;您需要在电脑上快…...

编程新知 2026/5/13 15:20:30