CSS属性探秘系列(二)：overflow及相关属性text-overflow
我要评论一、overflow
指定盒中容纳不下的内容的显示方法。
1.适用范围：块级元素
2.可取值：
visible：不剪切内容(默认)。
hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。
scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto： 在需要时裁剪内容并添加滚动条，此为body对象和textarea的默认值。
3.说明：
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
二、相关属性：
1.overflow-x:
overflow在水平方向上
2.overflow-y:
overflow在垂直方向上
3.text-overflow:
水平方向上,指定文字溢出时的显示方式,对于省略标记出现哪一侧由文字方向决定
1)可取值：
clip:文本溢出时不显示省略标记（…），将溢出的部分裁切掉
ellipsis:文本溢出时显示省略标记（…）
字符串：任何字符串（FF支持）
2)使用前提：
块级元素
设置宽度(不设置以浏览器窗口宽度为准)
overflow:hidden;//溢出隐藏
white-space:nowrap;//禁止换行
3)说明:
a.当对容器设置浮动或者定位时，必须对容器设置宽度才能出现省略号
b.对于Firefox浏览器，可以给text-overflow设置溢出时显示任意字符串来替换省略号，如text-overflow:”&&&”。
相关文章
- 当块元素想呈现该元素内部内容不换行或者超过该元素的部分隐藏起来2010-03-05
标题长度溢出时，自动显示为省略“...”的Css text-overflow
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...2011-07-27css overflow与text-indent:-999em 字体隐藏
css overflow与text-indent:-999em 字体隐藏,需要的朋友可以参考下。2010-03-18CSS:用overflow代替left截取指定长度字符串-CSS教程-网页制作-网页教学
为了防止文章标题过长超过容器(td,div)宽度而显示成多行，我们通常要对标题进行处理让其显示在一行，通常使用的方法有两种：一种方法是在客户端用CSS设置容器的overflow属2008-10-17CSS教程:导致一些问题的overflow-CSS教程-网页制作-网页教学网
overflow有问题吗？没问题。那为什么说要慎用呢？因为有时会导致一些问题。。。 关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:au2008-10-17css overflow溢出隐藏(文字溢出时的自动隐藏处理)
css溢出隐藏一般用于当内容太大以至于无法适应指定的区域时，通过设置css下的overflow属性来隐藏其内容2013-03-07标签增加CSS的overflow属性来清除浮动-CSS教程-网页制作-网页教学网
这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。2008-10-17- 网页制作Webjx文章简介：文字隐藏应用广泛，但常用的方法没有什么亲和力。 文字隐藏应用广泛，但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷：2009-04-02
CSS--overflow:hidden在项目实例中使用心得分享
大家对CSS属性中overflow:hidden并不陌生，至于它的应用，在下文中列出我在项目中，运用到此属性的例子，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04css中position:relative和overflow:hidden之间的问题
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成2013-09-04
最新评论