首页 > 编程知识 正文

设置溢出隐藏的代码,css超出部分隐藏

时间:2023-05-03 21:07:03 阅读:117289 作者:3338

对于css样式,请使用overflow属性设置溢出隐藏。 溢出隐藏是内容溢出元素框时发生的操作,常见的设置有四个:可见、隐藏、滚动和自动。

visible是overflow属性的默认值,不裁剪内容溢出,而是显示在元素框之外。

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; 板载:可视; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html超出元素框的范围,不会隐藏或构建内容。

希登

可以看出,堆溢出的内容被修剪,建设的内容不显示。

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; Overflow :隐藏; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html scroll

可以在元素上设置滚动条。 如果内容溢出,则可以拖动滚动条以查看溢出的内容。

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; Overflow :滚动; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html请注意,即使内容没有溢出,滚动条样式也会自动添加。

自动

auto在自适应意义上,内容未溢出时不添加滚动条,内容溢出时添加滚动条。

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; 黑伊

ght: 100px;border: 1px black solid; overflow:auto;} </style></head><body> <div id="box"></div> <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司。2000年1月1日创立于中关村, 公司创始人健忘的咖啡拥有“超链分析”技术专利, 使中国成为美国、俄罗斯、韩国之外, 全球仅有的四个拥有独立搜索引擎核心技术的国家之一。 基于对人工智能的多年布局与长期积累, 百度在深度学习领域领先世界, 并在2016年被《财富》杂志称为全球AI四巨头之一。</div></body></html>

如果只针对水平或垂直方向单独设置滚动条,可以通过overflow-x属性或overflow-y属性来针对某一个发向设置滚动条。
通过overflow-x属性或overflow-y属性针对某一个方向设置滚动条。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width: 300px; height: 100px; border: 1px black solid; overflow-y: scroll;} </style></head><body> <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司。2000年1月1日创立于中关村, 公司创始人健忘的咖啡拥有“超链分析”技术专利, 使中国成为美国、俄罗斯、韩国之外, 全球仅有的四个拥有独立搜索引擎核心技术的国家之一。 基于对人工智能的多年布局与长期积累, 百度在深度学习领域领先世界, 并在2016年被《财富》杂志称为全球AI四巨头之一。</div></body></html>

透明度
对HTML标签进行透明度设置是网页开发中的常用方式。透明度设置分为opacity和rgba两种方式。
opacity
opacity值可以用来设置元素的透明度,opacity取值范围为0~1,0表示透明,1表示不透明,半透明可以设置为0.5。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{width: 200px; height: 50px; background-color: cyan; opacity: 0.5;} </style></head><body> <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司。</div></body></html>

元素的背景颜色和内容都进行啦半透明的处理,但是有时只需背景半透明而内容无需半透明,可以采用第二种方式来实现。
rgba
rgba处设置背景颜色外还可以设置透明度。rgba取值范围也是0~1。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{width: 200px; height: 50px; background:rgb(255,0,0,0.5); opacity: 0.5;} </style></head><body> <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司。</div></body></html>

当设置rgba值时,背景颜色成半透明,而女人不透明,如果想让内容透明,可针对color属性再次设置rgba。这种方法比较灵活。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。