css overflow溢出属性详解（css中overflow属性的属性值有哪些）
zhezhongyun 2025-05-02 14:49 12 浏览
前端小伙伴们还搞不清楚css overflow的属性的各种用法吗？今天这篇文章总结了几种情况，一起来看下吧。
CSS中的overflow属性用于控制当内容溢出元素框时的行为。它有以下几个值，每个值都有其特定的用途和效果：
- visible: 默认值。内容不会被剪裁，会呈现在元素框之外。
- hidden: 内容会被剪裁，不会显示在元素框之外。
- scroll: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。
- auto: 如果内容溢出，则提供滚动条；否则不提供。
详细解释
visible
- 描述: 内容不会被剪裁，会呈现在元素框之外。
- 示例:.example {
overflow: visible;
}
hidden
- 描述: 内容会被剪裁，不会显示在元素框之外。
- 示例:.example {
overflow: hidden;
}
scroll
- 描述: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。无论内容是否溢出，都会显示滚动条。
- 示例:.example {
overflow: scroll;
}
auto
- 描述: 如果内容溢出，则提供滚动条；否则不提供。这是最常用的值，因为它根据需要动态地显示或隐藏滚动条。
- 示例:.example {
overflow: auto;
}
水平和垂直方向的单独控制
你也可以分别控制水平和垂直方向的溢出行为：
- overflow-x: 控制水平方向的溢出行为。
- overflow-y: 控制垂直方向的溢出行为。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Example</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
margin-bottom: 20px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.horizontal-scroll {
overflow-x: scroll;
}
.vertical-scroll {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container visible">
This is a long text that will overflow the container box. The overflow property is set to 'visible'.
</div>
<div class="container hidden">
This is a long text that will overflow the container box. The overflow property is set to 'hidden'.
</div>
<div class="container scroll">
This is a long text that will overflow the container box. The overflow property is set to 'scroll'.
</div>
<div class="container auto">
This is a long text that will overflow the container box. The overflow property is set to 'auto'.
</div>
<div class="container horizontal-scroll">
This is a long text that will overflow the container box horizontally. The overflow-x property is set to 'scroll'.
</div>
<div class="container vertical-scroll">
This is a long text that will overflow the container box vertically. The overflow-y property is set to 'scroll'.
</div>
</body>
</html>
创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦。
相关推荐
- AI做HTML的终极方案:一套提示词模板搞定所有应用
-
随着AI技术的飞速发展，生成HTML内容变得越来越简单。然而，每个HTML项目都需要复杂的提示词，这让很多人感到困扰。今天，我们要介绍一个万能的提示词模板，它可以帮助你快速生成各种HTML应用，包括P...
- 如何创建前端自定义主题和样式
-
引言在当今的Web开发中，用户界面的设计不仅是美观的问题，更是用户体验的关键组成部分。自定义主题和样式不仅可以让网站更具个性化，还能提高品牌的辨识度。本文将详细介绍如何使用CSS变量、预处理器（如Sa...
- 2022年了，你需要知道CSS的Calc和自定义属性
-
当大多数人想到在Web上进行计算时，他们会想到JavaScript。考虑到JavaScript是Web的主要编程语言，这是有道理的，但是如果我告诉你，你可以只用CSS进行相当复杂的计...
- 掌握这 7 个 CSS 技巧，代码效率秒提升
-
最近接了个项目，PM又来催：“登录弹窗能不能加点透明毛玻璃效果？活动标题再做点酷炫的渐变？对了，用户的反馈框能不能调整大小？”听完这要求，我脑袋直接嗡了：又想炫酷，又不想加班，这不扯嘛！正当我愁得要...
- 跟着振锁撸全栈之JAVA入门 | 创建自己的第一个网站项目
-
一、相关技术栈版本概览技术栈版本说明java≥17.0.2JDK版本springframework6.1.11JavaEE开发框架springboot3.3.2容器+MVC框架gradle8.9自动化...
- 七步教你创建个人网站
-
可以按照以下步骤来搭建自己的网站并供他人访问：1．获取域名和托管服务：首先，你需要注册一个域名（例如http://www.yourwebsite.com）。选择一个简洁、易记的域名，然后购买域名注册服...
- 前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)
-
使用CSS最困难的部分之一是处理CSS的权重值，它可以决定到底哪条规则会最终被应用，尤其是如果你想在Bootstrap这样的框架中覆盖其已有样式，更加显得麻烦。不过随着CSS层的引入，这一...
- 在 JAVASCRIPT 中创建 HTML 元素...
-
你能在JavaScript中创建一个HTML元素吗？答案是肯定的，你可以在JavaScript中创建一个元素让我们看看如何？如果你想在JavaScript中创建一个div元素——...
- 使用 HTML 创建可折叠的交互式组件，一行 JS 代码也不用写
-
如果你想创建一个可折叠的交互式组件，使用<details>元素即可，一行JavaScript也不用写。<details>组件定义了一个可折叠的容器，它的第一个元素必须...
- AI实用指南:Rules编写规则详解，从前端到后端的技术栈全覆盖
-
在AI驱动的开发时代，掌握如何与AI助手高效协作已成为工程师的必备技能。本文全面梳理了不同技术领域的AI编程规则，帮助你划定合理边界，提升开发效率。一、AI编程通用规则1.明确任务边界在使用AI辅助...
- 如何使用CSS创建高级动画，这个函数必须掌握
-
我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。创建高...
- Qt - QSS样式表
-
1.QSS简介Qt样式表(stylesheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(CascadingStyleSheets,CCS)启发而来，只是Qt...
- 我们放弃了 Nacos 作为配置中心，转而选择了这款神器~
-
由于Apollo概念比较多，刚开始使用比较复杂，最好先过一遍概念再动手实践尝试使用。1.1、背景随着程序功能的日益复杂，程序的配置日益增多，各种功能的开关、参数的配置、服务器的地址……对程序配置的期...
- 2023年CSS-in-JS 和 CSS Modules 谁才是最终赢家?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!最近，Emotion排名第二的维护者S...
- 河北公布2024年普通高校招生专业选考科目要求
-
近日，河北省教育考试院发布2024年拟在我省招生的普通高校招生各专业（类）选考科目要求，供2021年进入高中一年级的普通高中学生选科参考。学生可根据自身兴趣爱好及特长，结合选考科目要求，合理确定选考科...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)