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

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

news 2025/7/8 15:05: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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/6/18 6:31:56

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/8 13:22:11

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/7/6 5:16:26

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/7/7 10:49:48

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/7/5 11:56:12

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/7/3 12:34:43

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/5 14:15:20

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/7/7 8:53:20

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/7/4 14:33:59