CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

　　平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。

　　这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。

　　特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。

　　总之要想让内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可

一、 我们可以使用CSS overflow样式解决

　　对应样式overflow:hidden

　　Div{overflow:hidden}

这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

二、超出部分用省略号显示

　　1、对象设置text-overflow:ellipsis;省略号样式

　　2、使用nobr标签，强制让内容不换行（css换行、css不换行）。

　　div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

NOte：

　　text-overflow语法：

　　text-overflow : clip | ellipsis

　　text-overflow参数值和解释：

　　clip : 　不显示省略标记（...），而是简单的裁切

　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　text-overflow应用说明：

CSS text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。

　　要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr禁止换行标签）

　　white-space

　　　　属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的
默认值： normal
继承性： yes
版本： CSS1
JavaScript 语法： object.style.whiteSpace="pre"

实例

规定段落中的文本不进行换行：

p{
 white-space: nowrap
 }
浏览器支持
所有浏览器都支持 white-space 属性。
 注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。