CSS处理内容溢出

devtools/2025/2/28 17:24:49/

css"><!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>处理内容溢出</title><style>#d1{width: 400px;height: 300px;background-color: aqua;/* overflow: hidden; */}#d2{width: 1000px;height: auto;background-color: yellow;}</style>
</head><body><div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi atque praesentium delectus ullam, illo inciduntquam ex cupiditate ab consequuntur dolor natus. Pariatur quia perferendis, rerum quos corporis est, voluptatenostrum maiores iusto tempora sequi culpa praesentium doloremque, itaque aliquid aspernatur eligendi<div id="d2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt eligendi optio repellat a totam at pariaturquod ea eveniet mollitia saepe rem, maiores perspiciatis, cumque dolores repellendus corporis iste iustoinventore explicabo asperiores! Hic quisquam laborum similique at ratione quibusdam sequi sapiente ex beataeeos debitis molestias, dolore, ducimus maiores!</div>perspiciatis possimus magni eius atque. Officia doloribus molestias consectetur explicabo ab nemo exercitationemmagnam voluptates, ea eveniet provident adipisci asperiores voluptatem fugit laborum ad. Suscipit cum nemo,autem fuga est nobis esse quaerat tenetur sequi, blanditiis adipisci? Repudiandae molestiae in eum, temporadolorem hic velit. Assumenda distinctio sed ut architecto vel iste deleniti rem nemo, ducimus modi accusamus!</div>
</body></html>

 

overflow加入这个属性后,溢出的内容就会消失  如下

 

 

overflow - x
水平方向溢出内容的处理方式 
overflow - y
垂直方向溢出内容给的处理方
css"> #d1{width: 400px;height: 300px;background-color: aqua;overflow-x: auto;overflow-y: auto;}


http://www.ppmy.cn/devtools/163398.html

相关文章

DeepSeek集成IT技术开发方向全景解读:重构智能开发新范式

一、技术架构革命:支撑IT开发集成的三大引擎 1. 动态MoE架构(DeepSeekMoE-32B) 通过混合专家系统实现精准任务路由,在软件开发场景中展现出显著优势: 代码生成场景:激活Java/Python/C++等语言专家模块,单元测试覆盖率提升至85%硬件资源优化:FP16量化下推理显存需求低…

2025年软考报名费用是多少?全国费用汇总!

软考报名时间终于确定了&#xff01;想要参加2025年软考的同学们注意啦&#xff01;特别是那些一年只有一次考试机会的科目&#xff0c;千万不要错过哦&#xff01;这里为大家整理了各地的报名时间、科目、费用等信息&#xff0c;快来看看吧&#xff01; 一、2025年软考时间安…

git 国内源

git config --global url.“https://hub.fastgit.xyz/”.insteadOf “https://github.com/” git config --global url.“https://hub.fastgit.xyz/”.insteadOf “git://github.com/” 取消 FastGit 代理: git config --global --unset url.“https://hub.fastgit.xyz/”.in…

MySQL表约束的种类与应用

在MySQL数据库中&#xff0c;表约束是确保数据完整性的关键。约束限制了可以在表中插入或更新的数据类型&#xff0c;保证数据的准确性和可靠性。了解MySQL中的各种表约束对于数据库设计和数据维护至关重要。以下是MySQL支持的主要表约束类型及其应用的详细介绍。 1. 主键约束…

2025 IAST工具推荐 ︱IAST工具如何赋能企业开发安全?

IAST交互式应用程序安全测试&#xff08;Interactive Application Security Testing&#xff09;是Gartner 2012年提出的一种新型运行时应用安全测试方案&#xff0c;规避了黑盒安全扫描DAST和白盒代码审计技术的主要技术缺陷&#xff0c;通过代理/VPN、旁路流量镜像、透明流量…

Java I/O 与 NIO 核心区别及应用场景详解

一、核心概念对比 特性传统 I/O (BIO)NIO (New I/O)模型同步阻塞模型同步非阻塞模型数据流方向单向流&#xff08;InputStream/OutputStream&#xff09;双向通道&#xff08;Channel&#xff09;数据操作单元基于字节/字符流基于缓冲区&#xff08;Buffer&#xff09;线程模型…

【Stable Diffusion】AnimatedDiff--AI动画 插件使用技巧分享;文生视频、图生视频、AI生成视频工具;

本专栏主要记录人工智能的应用方面的内容,包括chatGPT、DeepSeek、AI绘画等等; 在当今AI的热潮下,不学习AI,就要被AI淘汰;所以欢迎小伙伴加入本专栏和我一起探索AI的应用,通过AI来帮助自己提升生产力; 本文的目标就是让每一个读者,都能学会并掌握AnimateDiff的使用;成…

【JavaWeb学习Day19】

Tlias智能学习系统&#xff08;员工管理&#xff09; 删除员工&#xff1a; 需求分析&#xff1a; 其实&#xff0c;删除单条数据也是一种特殊的批量删除&#xff0c;所以&#xff0c;删除员工的功能&#xff0c;我们只需要开发一个接口就行了。 三层架构&#xff1a; Cont…