您现在的位置: 365建站网 > 365学习 > div+css代码超出部分自动溢出隐藏(word-wrap/overflow)

div+css代码超出部分自动溢出隐藏(word-wrap/overflow)

文章来源:365jz.com     点击数:656    更新时间:2017-12-24 11:46   参与评论
通常,为了让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


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (656人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------