您现在的位置是:首页 > 电脑 > 

不隐藏html超出部分,css如何设置超出部分不显示?

2025-07-20 07:07:27
不隐藏html超出部分,css如何设置超出部分不显示? 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。 我们可以使用CSS overflow样式设置超出部分不显示: 对应

不隐藏html超出部分,css如何设置超出部分不显示?

平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。

我们可以使用CSS overflow样式设置超出部分不显示:

对应样式overflow:hiddenDiv{overflow:hidden}

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

示例:

.div1{ width:00px; height:50px; line-height:25px; overflow:hidden}

/* 设置对象高度宽度,同时设置overflow:hidden */

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。

效果图:

属性值:visible 默认值。内容不会被修剪,会呈现在元素框之外。

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

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

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

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/diannao/876388.html

相关标签:无
上传时间: 2024-04-14 21:53:53
留言与评论(共有 14 条评论)
本站网友 孙树侠
3分钟前 发表
这是一些文本
本站网友 白银期货走势
2分钟前 发表
hidden 内容会被修剪,并且其余内容是不可见的
本站网友 全国整形医院排行
12分钟前 发表
inherit 规定应该从父元素继承 overflow 属性的值
本站网友 索尼专卖店
12分钟前 发表
这是一些文本
本站网友 北京赛特奥莱
6分钟前 发表
不隐藏html超出部分
本站网友 南京ktv
17分钟前 发表
25px; overflow
本站网友 雪梨膏
2分钟前 发表
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
本站网友 二丫
26分钟前 发表
这是一些文本
本站网友 中国肥城
4分钟前 发表
这是一些文本
本站网友 如何给宝宝添加辅食
25分钟前 发表
css如何设置超出部分不显示? 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱
本站网友 台北雅厨
6分钟前 发表
这是一些文本
本站网友 通河政府网
0秒前 发表
这是一些文本
本站网友 边坡防护网
22分钟前 发表
hidden将会隐藏超出DIV宽度高度的内容包括图片