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

CSSoverflow 属性

news 2026/3/31 11:59:15

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

OpCore-Simplify：突破性黑苹果EFI配置革命，15分钟完成专业级系统搭建 [特殊字符]

OpCore-Simplify&#xff1a;突破性黑苹果EFI配置革命&#xff0c;15分钟完成专业级系统搭建 &#x1f680; 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify…...

编程新知 2026/3/31 11:53:33

Arduino_ConnectionHandler库：嵌入式网络连接状态管理与自适应重连

1. Arduino_ConnectionHandler 库深度解析&#xff1a;嵌入式网络连接管理的工程实践指南1.1 库定位与核心价值Arduino_ConnectionHandler是 Arduino 官方生态中面向物联网终端设备的网络连接抽象管理层&#xff0c;其设计目标并非替代底层通信协议栈&#xff08;如 WiFiClient…...

编程新知 2026/3/31 11:43:19

嵌入式AI新篇章：Qwen3-ASR-0.6B在边缘计算设备上的部署与优化

嵌入式AI新篇章&#xff1a;Qwen3-ASR-0.6B在边缘计算设备上的部署与优化 1. 引言&#xff1a;当语音识别遇见边缘计算 想象一下&#xff0c;你对着一个巴掌大的智能音箱说话&#xff0c;它几乎在你话音落下的瞬间就理解了你的意思&#xff0c;并且完全不需要连接云端。或者&…...

编程新知 2026/3/31 10:57:05

Layerdivider：零基础上手图像分层工具的完整指南

Layerdivider&#xff1a;零基础上手图像分层工具的完整指南 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 为什么自动分层总是不尽如人意&#xff1f;设…...

编程新知 2026/3/31 10:53:03

FPGA网络加速入门：拆解Xilinx 7系列GTP与1G/2.5G Ethernet PCS/PMA IP核，搞懂SGMII接口那些事

FPGA网络加速实战&#xff1a;从Xilinx GTP架构到SGMII接口的深度解析 在FPGA高速通信领域&#xff0c;以太网接口设计一直是工程师面临的核心挑战之一。当我们需要在Xilinx 7系列FPGA上实现1G/2.5G以太网功能时&#xff0c;GTP收发器与PCS/PMA IP核的配置往往成为项目成败的关…...

编程新知 2026/3/31 10:04:22

掌握罗技鼠标宏的5个技术维度：从原理到实战优化

掌握罗技鼠标宏的5个技术维度&#xff1a;从原理到实战优化 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 一、技术原理解析&#xff1a;机械补…...

编程新知 2026/3/31 9:56:20

OBS多平台直播同步解决方案：从配置到优化的完整指南

OBS多平台直播同步解决方案&#xff1a;从配置到优化的完整指南 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 在当今内容创作领域&#xff0c;多平台同步直播已成为扩大受众覆盖的关键…...

编程新知 2026/3/31 8:17:31

Qwen3-ASR-0.6B效果展示：金融客服录音（专业术语+缩略语）识别术语表匹配

Qwen3-ASR-0.6B效果展示&#xff1a;金融客服录音&#xff08;专业术语缩略语&#xff09;识别术语表匹配 金融客服电话录音里&#xff0c;客户和坐席的对话常常像在说“天书”。一会儿是“LPR”&#xff0c;一会儿是“T0”&#xff0c;还有各种产品代码和内部术语。把这些录音…...

编程新知 2026/3/31 7:33:20

Gemma-3 Pixel Studio实战教程：离线模式部署与本地模型权重缓存策略

Gemma-3 Pixel Studio实战教程&#xff1a;离线模式部署与本地模型权重缓存策略 1. 项目概述与核心价值 Gemma-3 Pixel Studio是基于Google最新开源Gemma-3-12b-it模型构建的多模态对话终端&#xff0c;将强大的文本理解能力与视觉感知功能完美结合。与传统对话系统相比&…...

编程新知 2026/3/31 7:21:08

突破限速：8大网盘直链解析方案全解析

突破限速&#xff1a;8大网盘直链解析方案全解析 【免费下载链接】Online-disk-direct-link-download-assistant 可以获取网盘文件真实下载地址。基于【网盘直链下载助手】修改&#xff08;改自6.1.4版本&#xff09; &#xff0c;自用&#xff0c;去推广&#xff0c;无需输入“…...

编程新知 2026/3/31 6:42:48