css3内容溢出属性

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

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

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

auto：在需要时剪切内容并添加滚动条，

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

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

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

no-content：当内容溢出容器时不显示内容，类似于添加了visibility：hidden；

时间： 2024-09-29 18:45:46

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

CSS3的新增属性及其用法

CSS3的新增属性及其用法现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白保留换行符 pre-wrap 保留空白正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分等分布方式以及如何处理可用的空间.使该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz).chrome(-webkit

css3的一些属性

以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的 @keyframes mymove(mymove必须定义动画的名称在) { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-moz-

CSS3新增文本属性

CSS2中常用的属性: text-indent:首行缩进: vertical-align:垂直对齐方式: white-space:空格处理方式: line-height:设置行高: CSS3新增文本属性: text-overflow: clip:溢出的部分裁切掉: ellipsis:显示省略标记(...) //该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果. text-align: 原有属性:left

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式十六进制方式(#FF0000,#B9B9B9等) rgb方式三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中会发现这些css.box-sizing究竟有什么用还得重头说起... 我们一般计算一个块状元素的宽度的时候会将左右padding,左右border宽度,margin 都算进去,如下图所示(浏览器默认计算方式),宽度不是100px,而是160px: style="width:100px;padding

关于client浏览器界面文字内容溢出用省略号表示方法

在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号(-)显示,这样.依照习惯,人们都会知道这儿有文字被省略了. 使用CSS截断字符串方法 CSS中有个属性叫做text-overflow:ellipsis. 说明:长处是内容能够为不论什么HTML元素.包含超链接和图片等,在IE6中还会在结尾自己主动显示省略号.缺点是必须指定宽度数值.而且宽度不能