位置: IT常识 - 正文
推荐整理分享CSS中的overflow,(Css中的color属性用于设置html元素的背景颜色),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:Css中的选择器不包括,Css中的高度,Css中的选择器包括,CSS中的overflow属性用于,css中的overflow是什么意思,CSS中的overflow属性用于,CSS中的overflow,css中的overflow是什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!
1.overflow:visible 我们先定义一段代码,这里文本内容会超出元素框:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; overflow: visible; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>运行结果: 这里是overflow的基本默认属性,文本不会被修剪,直接超出元素框。 2.over:hidden; 这个属性内容会被修剪,但是溢出的内容是无法看到的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; /*overflow: visible;*/ overflow: hidden; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>运行结果: 这里比较上面的属性,同样的元素框,但是溢出部分却已经被裁剪且无法显示。 3.over:scroll; 相比于1,2的属性,over:scroll;会裁剪内容,浏览器会形成滚动条便于查看超出元素框的文本内容。 代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; /*overflow: visible;*/ /*overflow: hidden;*/ overflow: scroll; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>运行结果:
上一篇:YOLOv5源码逐行超详细注释与解读(4)——验证部分val(test).py(yolov5源码讲解)
下一篇:【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏(前端yck)
友情链接: 武汉网站建设