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

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

news 2025/11/6 10:39:21

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/11/5 4:23:19

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/11/4 1:39:10

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/1 23:43:26

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/11/2 5:39:39

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/10/25 22:07:27

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/10/28 13:24:10