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

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

news 2025/12/21 20:06: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

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/21 4:25:33

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/12/10 10:10:30

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/12/13 2:58:08

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

编程新知 2025/12/10 12:14:06

CMS内容管理系统的设计与实现：多站点模式的实现

在一套内容管理系统中&#xff0c;其实有很多站点&#xff0c;比如企业门户网站&#xff0c;产品手册&#xff0c;知识帮助手册等&#xff0c;因此会需要多个站点&#xff0c;甚至PC、mobile、ipad各有一个站点。 每个站点关联的有站点所在目录及所属的域名。 一、站点表设计…...

编程新知 2025/12/21 12:18:50

【向量库】Weaviate概述与架构解析

文章目录 一、什么是weaviate二、High-Level Architecture1. Core Components2. Storage Layer3. 组件交互流程 三、核心组件1. API Layer2. Schema Management3. Vector Indexing3.1. 查询原理3.2. 左侧&#xff1a;Search Process&#xff08;搜索流程&#xff09;3.3. 右侧&…...

编程新知 2025/12/4 6:32:21

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术点解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术点解析 第一轮&#xff1a;基础概念问题 请解释Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; 程序员JY回答&#xff1a;Spring框架的核心容器是IoC容器&#xff08;控制反转…...

编程新知 2025/10/26 8:27:39

【Linux应用】Linux系统日志上报服务，以及thttpd的配置、发送函数

【Linux应用】Linux系统日志上报服务&#xff0c;以及thttpd的配置、发送函数 文章目录 thttpd服务安装thttpd配置thttpd服务thttpd函数日志效果和文件附录&#xff1a;开发板快速上手&#xff1a;镜像烧录、串口shell、外设挂载、WiFi配置、SSH连接、文件交互&#xff08;RADX…...

编程新知 2025/12/12 22:34:04