实例

设置 overflow 属性:

<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head><body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p><div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body></html>

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值: visible
继承性: no
版本: CSS2
JavaScript 语法: object.style.overflow="scroll"

可能的值

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

CSS overflow 属性相关推荐

  1. CSS overflow 属性(琐碎知识点整理)

    本文详细的介绍了 CSS overflow 属性的 '定义和用法' + '属性效果' 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) . 一. over ...

  2. CSS Overflow属性详解(转)

    检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...

  3. CSS overflow属性与display属性

    overflow属性: visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其 ...

  4. css overflow属性及使用方法(场景)

    overflow这个属性还是挺实用的比如,一个div展示文字,想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll; 1.overflow的属性 值 ...

  5. css overflow属性的测试

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow 看一些实际测试效果: visible: 超过范围的区域仍然能显示 hidden: 超 ...

  6. css overflow属性及使用方法

    定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. overflow的属性 可取的值: visible    默认值.内容不会被修剪,会呈现在元素框之外. hidden    内容会 ...

  7. 前端---css中的overflow属性如何使用

    CSS overflow 属性 属性定义及使用说明 overflow属性指定如果内容溢出一个元素的框,会发生什么. 默认值: visible 继承: no 版本: CSS2 JavaScript 语法 ...

  8. 教你玩转CSS Overflow

    目录 CSS Overflow overflow: visible CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style># ...

  9. 前端:CSS/12/display属性,overflow属性,cursor光标类型,CSS定位,综合案例:今日闪价

    display属性 功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...

最新文章

  1. 【Python】keras卷积神经网络识别mnist
  2. MySQL中VARCHAR最大长度是多少?CHAR和VARCHAR有哪些区别?
  3. python交互界面的退出
  4. php和python web开发-初入Web开发,php、python和ruby应该学哪个?
  5. MyBatis 缓存详解-开启二级缓存的方法
  6. 华为手机连电脑_手机、电脑无网高速互传!华为神技逆天
  7. OGEngine教程:声音载入
  8. 吃货阶段03 需求 实现我要下单的功能 0927
  9. 【Elasticsearch】Elasticsearch 相关度评分 TFIDF
  10. 花书+吴恩达深度学习(二四)蒙特卡罗方法(重要采样,MCMC)
  11. Spring Boot+HATEOAS快速介绍与示例
  12. 雷电3菊链功能_同轴科技推出5款USB-C全功能数据线,清一色内置同轴线缆
  13. k8s基本概念-如何使用私有regsitry
  14. 火狐firebug和firepath插件安装方法(最新)
  15. 博帝 boost和威刚S102哪个好详细原创评测
  16. 全球与中国人工智能翻译服务市场现状及未来发展趋势
  17. Hive指定位置增加字段及解决columns have types incompatible with the existing columns in their respective positio
  18. 关于esxtop命令下%RUN、%RDY和%MLMTD三个参数的详细解读
  19. 每日刷题记录 (十五)
  20. ADS的信号完整性和电源完整性仿真应用方案

热门文章

  1. 如果是狗,也要做一直战斗狗--三十岁的程序员
  2. PPT怎样使用艺术字来突出显示标题文本
  3. WEB数据库管理平台kb-dms:数据库查询+更新+删除操作【六】
  4. 哈工大计算机系统2022年秋季学期大作业
  5. vivos7和华为nova7的区别 哪个好
  6. PHP中的explode函数
  7. 《开源之歌》,献给每一位开源人
  8. 微众银行区块链2021年度回顾
  9. Admin.net框架数据初始化
  10. 9.9. Date/Time Functions and Operators