通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！

但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐藏，需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏！


代码：

    <style>
    .box{
        width:200px;
        height:150px;
        overflow:hidden;
        border:2px solid #000;
        float:left;
        margin-right:20px;
    }
    .relative{
        position:relative;
    }
    .div{
        width:200px;
        height:100px;
        background:#FF5400;
        margin-top:100px;
        position:absolute;
    }
    .zi{
        width:200px;
        height:300px;
        background:#FF0000;
    }
    </style>
    <div class="box">
    高300px的子元素溢出隐藏
    <div class="zi"></div>
    </div>
    <div class="box">
    不带relative
    <div class="div"></div>
    </div>
    <br><br><br><br><br><br>
    <div class="box relative">
    带上relative
    <div class="div"></div>
    </div>

附：

1、CSS overflow属性，overflow 属性规定当内容溢出元素框时发生的事情，所有主流浏览器都支持 overflow 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

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

hidden：内容会被修剪，并且其余内容是不可见的。

2、position属性，position 属性规定元素的定位类型。所有主流浏览器都支持 position 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值：static

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

1、溢出隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。
CSS代码：

<style>
.365jzcss{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>

Html代码：

<div class="365jzcss">欢迎来到365建站网，
在这里你可以学习CSS同时也可以下载需要的资源，
同时可以找到自己常见问题答案</div>

这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。

2、溢出隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。
Css代码

<style>
.365jzcss{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>

Html代码

<div class="365jzcss">
<img src="http://soft.365jz.com/images/show3.png" />
</div>

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

css实现隐藏多余溢出文字并显示省略号

<meta charset="utf-8" />
<style>
.txt{
    width:200px;
    border:1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
<p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

总结如下：

1. 用word-wrap解决文字溢出的问题

word-break:break-all和word-wrap:break-word经常用来解决长字符串换行问题。word-break:break-all在IE6/7/chrome/safari为一派，表现为尾部截断，而ff3.0/opera表现为无效。既过长单词换行显示，然后溢出边界。word-wrap:break-word;在IE6/7/chrome/safari为一派 表现为长单词换行，再显示不下才裁切。而ff3.0/opera也表现为无效。

文本过长，在容器内显示不下的时候，是否要换行，使用 white-space : normal / nowrap 属性，normal : 采用浏览器默认设置；nowrap : 不换行。

溢出后的处理方式,若是想隐藏溢出的内容，可以考虑使用 text-overflow 属性。

2. css强制不换行,溢出隐藏：overflow:hidden

• css
• div
• 溢出