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

CSSoverflow 属性

news 2025/11/7 4:00:42

overflow 属性用于设置当元素中的内容溢出后的情况。

值得注意的是: 所谓溢出，是指子元素的大小（包括文本、元素或图片等）超出父元素的区域，会有一部分内容显示在父元素所在的区域外。

属性值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。

上述两个值，要么设置溢出的内容默认显示在父元素的区域之外，要么设置溢出的内容隐藏不可见。这两种结果都是很好的效果。所以，在实际开发中，很少使用这两个值。

在 HTML 页面中定义一个 <div> 标签，设置 CSS 样式，并设置较多的文本内容，具体代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 300px;height: 300px;background-color: lightskyblue;}</style></head><body><div>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
一九二四年九月十五日。</div></body>
</html>

当为第一个 <div> 标签设置 overflow 属性值为 hidden 时，该 <div> 中的溢出文本内容会被隐藏。

属性值描述
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

在 HTML 页面中定义一个 <div> 标签，设置 CSS 样式，并设置较多的文本内容，具体代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 300px;height: 300px;background-color: lightskyblue;}</style></head><body><div>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
一九二四年九月十五日。</div></body>
</html>

当为第一个 <div> 标签设置 overflow 属性值为 scroll 时，该 <div> 中的溢出文本内容会显示滚动条。

上述两个值，当有溢出的内容出现时，都会显示滚动条以便查看其余的内容。但不同是:

  • scroll: 无论是否有溢出的内容，始终显示滚动条。
  • auto: 当有溢出的内容出现时，才显示滚动条。如果没有溢出的内容时，会自动隐藏滚动条。

相关文章：

CSSoverflow 属性

overflow 属性用于设置当元素中的内容溢出后的情况。 值得注意的是: 所谓溢出&#xff0c;是指子元素的大小&#xff08;包括文本、元素或图片等&#xff09;超出父元素的区域&#xff0c;会有一部分内容显示在父元素所在的区域外。 属性值描述visible默认值。内容不会被修剪&a…...

编程日记 2023/9/7 19:22:17

08:STM32----DMA数据转运

目录 1:简历 2:存储器映像 3:DMA基本结构 4: DMA转运的条件 5:DMA请求 A:DMA数据转运 1:连接图 2:数据转运DMA 3:函数介绍 4:步骤 5:代码 B:DMAAD多通道 1:连接图 2:结构图 3:函数介绍 4:代码 1:简历 DMA&#xff08;Direct Memory Access&#xff09;直接存储…...

编程日记 2023/9/7 19:21:16

Golang 程序漏洞检测利器 govulncheck（二）：漏洞数据库详解

上一篇文章详细介绍了 Golang 程序漏洞扫描工具 govulncheck 的使用方法&#xff0c;govulncheck 强大功能的背后&#xff0c;离不开 Go 漏洞数据库&#xff08;Go vulnerability database&#xff09;的支持&#xff0c;接下来详细讲解下 Go 漏洞数据库相关的知识。 Go 漏洞数…...

编程日记 2023/9/7 19:20:15

[JDK8下的HashMap类应用及源码分析] 数据结构、哈希碰撞、链表变红黑树

系列文章目录 [Java基础] StringBuffer 和 StringBuilder 类应用及源码分析 [Java基础] 数组应用及源码分析 [Java基础] String&#xff0c;分析内存地址&#xff0c;源码 [JDK8环境下的HashMap类应用及源码分析] 第一篇 空构造函数初始化 [JDK8环境下的HashMap类应用及源码分…...

编程日记 2023/9/7 19:19:14

高等数学刷题

两个公式本质都是相同的 Π/2 1^∞类型...

编程日记 2023/9/7 19:18:13

lintcode 1840 · 矩阵还原【中等 vip 二维前缀和数组】

题目 https://www.lintcode.com/problem/1840 现有一个n行m列的矩阵 before&#xff0c;对于before里的每一个元素 before[i][j]&#xff0c;我们会使用以下算法将其转化为 after[i][j]。现给定after矩阵&#xff0c;请还原出原有的矩阵before。s 0 for i1: 0 -> ifor j1…...

编程日记 2023/9/7 19:17:12

VMware虚拟机+Centos7 配置静态，动态IP

本章目录 一、查看网关&#xff1a; 编辑–>虚拟网络编辑器二、点击NAT设置三、记住网关IP待会要用四、配置静态ip地址1、进入存放修改IP地址的目录2、修改ip地址的文件3、编辑文件4、文件&#xff08;编辑好后退出&#xff09; 五、重启网络六、测试1、linux上查看IP地址的…...

编程日记 2023/9/7 19:16:12

【C++精华铺】10.STL string模拟实现

1. 序言 STL&#xff08;标准模板库&#xff09;是一个C标准库&#xff0c;其中包括一些通用的算法、容器和函数对象。STL的容器是C STL库的重要组成部分&#xff0c;它们提供了一种方便的方式来管理同类型的对象。其中&#xff0c;STLstring是一种常用的字符串类型。 STLstrin…...

编程日记 2023/9/7 19:15:11

微信小程序开发---事件的绑定

目录 一、事件的概念 二、小程序中常用的事件 三、事件对象的属性列表 四、bindtap的语法格式 &#xff08;1&#xff09;绑定tap触摸事件 &#xff08;2&#xff09;编写处理函数 五、在事件处理函数中为data中的数据赋值 六、事件传参 七、bindinput的语法格式 八、…...

编程日记 2023/9/7 19:14:09

基于Hata模型的BPSK调制信号小区覆盖模拟matlab完整程序分享

基于Hata信道模型的BPSK调制信号小区覆盖模拟matlab仿真&#xff0c;对比VoIP, Live Video,FTP/Email 完整程序&#xff1a; clc; clear; close all; warning off; addpath(genpath(pwd)); % Random bits are generated here. bits randi([0, 1], [50,1]); M 2; t 1:1:50; …...

编程日记 2023/9/7 19:13:08

音视频 ffmpeg视频裁剪

将输入视频帧的宽度和高度从x和y值表示的位置裁剪到指定的宽度和高度;x和y是输出的左上角坐标&#xff0c;协调系统的中心是输入视频帧的左上角。 如果使用了可选的keep_aspect参数&#xff0c;将会改变输出SAR(样本宽比)以补偿新的DAR(显示长宽比) cropow[:oh[:x[:y[:keep_as…...

编程日记 2023/9/7 19:12:07

Web3数据云OORT推出商用版智能代理构建平台：OORT TDS

随着技术进步和数据隐私问题的日益凸显&#xff0c;生成式AI和去中心化技术联手为企业和个人开辟了全新的互动视野。站在这一趋势的前沿&#xff0c;OORT展现了其在去中心化数据云领域的技术实力&#xff0c;作为行业的领先者&#xff0c;今日Oort正式宣布OORT TDS (Talk-to-Da…...

编程日记 2023/9/7 19:11:05

ChatGPT：革命性的自然语言处理技术

自然语言处理&#xff08;NLP&#xff09;技术的快速发展已经为我们的日常生活带来了巨大的变革。在这个领域&#xff0c;ChatGPT作为一个突出的代表&#xff0c;正在为我们带来更多的便利和机会。本文将介绍ChatGPT的基本概念、应用领域以及它在未来可能带来的影响。 ChatGPT…...

编程日记 2023/9/7 19:10:03

利用frps搭建本地自签名https服务的透传

nginx的搭建就不介绍了&#xff0c;教程很多&#xff0c;基本上油手就会。 在本例中&#xff0c;frp服务器的域名是 www.yourfrp.com&#xff0c;同时也是反向代理nginx服务器; 本地网站要用的域名&#xff1a; test.abcd.com 请事先将 test.abcd.com 解析到 frp所在服务器…...

编程日记 2023/9/7 19:09:01

安卓手机安装Linux然后在其中安装(jdk，MySQL，git)

安卓手机安装Linux然后在其中安装(jdk&#xff0c;MySQL&#xff0c;git) 一.安卓手机安装Linux 安装termux最新教程_哔哩哔哩_bilibili Linux入门教程__阿伟_的博客-CSDN博客 二.安装jdk Termux手机终端运行java。jdk环境的搭建_哔哩哔哩_bilibili java后端__阿伟_的博客-CSD…...

编程日记 2023/9/7 19:08:00

javaee之黑马乐优商城2

简单分析一下商品分类表的结构 先来说一下分类表与品牌表之间的关系 再来说一下分类表和品牌表与商品表之间的关系 面我们要开始就要创建sql语句了嘛&#xff0c;这里我们分析一下字段 用到的数据库是heima->tb_category这个表 现在去数据库里面创建好这张表 下面我们再去编…...

编程日记 2023/9/7 19:06:59

Qt打开及创建项目，运行程序（1)

安装之后&#xff0c; 1.文件->新建文件或项目 2.Application->Qt Widgets Application 3.自己设置名称和路径 4.这一步非常非常重要&#xff0c;要选择编译器&#xff0c;&#xff08;MinGW是可以在Qt里用&#xff0c;如果想与VS交互&#xff0c;要选择MSVC&#xff09…...

编程日记 2023/9/7 19:05:58

八种十倍提升API性能的方式

提起API&#xff0c;作为程序员来说并不陌生&#xff0c;很多程序员的大部分工作都是围绕着它&#xff0c; 然而&#xff0c;有些内容被大家忽略&#xff0c;API的性能会直接影响产品的用户体验&#xff0c;比如&#xff0c;一个视频软件&#xff0c;播放1s后需要加载5s&#x…...

编程日记 2023/9/7 19:04:57

pg_database中的datlastsysoid

一&#xff0c;关于 pg_database 在 PostgreSQL 中&#xff0c;对于在数据库集群内创建的每个数据库,其关键信息都会被保存到 pg_database 系统表中。 PostgreSQL 确保通过 pg_database 系统表持久化存储每个数据库的属性信息&#xff0c;以方便后续管理和使用。这也让 pg_da…...

编程日记 2023/9/7 19:03:56

【已解决】ognl.PropertyAccessor

在Spring boot2.x用TemplateEngine处理数据得时候&#xff0c;出现以下错误&#xff1a; 定位到代码行&#xff1a; 解决办法&#xff1a;修改thymeleaf的依赖&#xff1a; <!-- thymeleaf --><dependency><groupId>org.thymeleaf</groupId><…...

编程日记 2023/9/7 19:02:55

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/10/31 18:32:29

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/11/2 13:18:58

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/10/30 14:53:11

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/9/10 17:50:53

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/7/31 7:00:15