overflow是css2.0的属性,css3中新增了overflow-x和overflow-y属性。

overflow-x主要是用来定义对水平方向内容溢出的剪切,而overflow-y主要是用来定义垂直方向的内容溢出的剪切。

overflow-x/overflow-y:visible | hidden | scroll | auto | no-display | no-content

visible:默认值。表示不剪切容器中的任何内容,不添加滚动条,元素将被剪切为包含对象的窗口大小,而且clip属性将失效

auto:在需要时剪切内容并添加滚动条,

hidden:内容溢出容器时,所有内容都将隐藏,而且不显示滚动条

scroll:不管内容有没有溢出容器,overflow-x都会显示横向滚动条,overflow-y都会显示纵向滚动条

no-display:当内容溢出容器时不显示内容,此时类似于添加了display:none、

no-content:当内容溢出容器时不显示内容,类似于添加了visibility:hidden;

css3内容溢出属性的更多相关文章

  1. CSS:overflow 内容溢出属性

    overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...

  2. 用css3让溢出内容显示省略号

    css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...

  3. css3的一些属性

    以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合anima ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

    CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  6. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  7. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

  8. [CSS]overflow内容溢出

      定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...

  9. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

随机推荐

  1. js 小数相加异常

    var a = 0.1; var b = 0.2; a + b//0.30000000000000004 这个bug可能是因为二进制计算溢出导致的. 解决办法:将小数转换为整数进行计算 计算后结果除以 ...

  2. SQL Server索引 (原理、存储)聚集索引、非聚集索引、堆 <第一篇>

    一.存储结构 在SQL Server中,有许多不同的可用排列规则选项. 二进制:按字符的数字表示形式排序(ASCII码中,用数字32表示空格,用68表示字母"D").因为所有内容都 ...

  3. DOM 操作XML(CRUD)

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><书架> ...

  4. Android 使用finalBitmap实现缓存读取

    public class NewsApplication extends Application{ private FinalBitmap finalBitmap=null; public Final ...

  5. iOS - Swift NSNumber 数字

    前言 public class NSNumber : NSValue public class NSDecimalNumber : NSNumber NSNumber 可以被赋值为各种数值类型.我们可 ...

  6. 使用otl,报错:mysql Commands out of sync; you can't run this command now

    1.代码如下: void TestCache(otl_connect& otlConn) { try { ] = {}; sprintf(sql,"call test1(1)&quo ...

  7. 关于php的一些小知识

    浏览目录: 一.PHP的背景和优势: 二.PHP原理简介: 三.PHP运行环境配置: 四.编写简单的PHP代码以及测试. 一.PHP的背景和优势 1.1   什么是PHP? PHP是能让你生成动态网页 ...

  8. DHCP 工作原理

    DHCP 详解 DHCP 工作原理 一.什么是DHCP? DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server), ...

  9. Java中去除StringBuffer最后一个字符

    原文:http://www.cnblogs.com/shaozhiheng/p/3661714.html 由于编写了这么一段代码: Iterator it3 = set.iterator(); whi ...

  10. js里面获取三位不重复值

    <html><body> <script type="text/javascript"> var d = new Date();var sz = ...