• 技术文章 >web前端 >css教程

    怎样隐藏溢出DIV的内容

    php中世界最好的语言php中世界最好的语言2017-11-23 14:17:32原创2268
    平时我们在网页布局的时候总是有文字内容多了,超过溢出我们限制的高度,那么就会有一些图片会撑破DIV,让网页错位变乱的问题,那我们如何解决呢?

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

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

    解决CSS样式

    这时我们可以使用CSS overflow样式解决:

    对应样式overflow:hidden

    Div{overflow:hidden}

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

    相关阅读:css实现溢出超出文字内容显示省略号

    隐藏超出内容案例

    1、隐藏超出对象宽度高度文字内容

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

    CSS代码:

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

    Html代码:

    <div class="div">欢迎,

    在这里你可以学习CSS同时也可以下载需要的资源,

    同时可以找到自己常见问题答案</div>

    解决撑破内容方法

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

    这里设置一个一定CSS宽度和CSS高度的对象盒子,放一个大的图片,然后使用overflow:hidden隐藏其超出部分。

    Css代码

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

    Html代码

    <div class="div"> 
    <img src="//m.sbmmt.com" /> 
    </div>

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

    溢出隐藏的小技巧就这么多了,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    在HTML里DIV怎么使用

    HTML5 <nav>标签怎么用

    html文档类型声明怎么写

    以上就是怎样隐藏溢出DIV的内容的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:内容 溢出 隐藏
    上一篇:CSS布局有哪些技巧 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网