CSS中的overflow，(Css中的color属性用于设置html元素的背景颜色)

编辑：rootadmin

CSS中的overflow， 1.总结（overflow只用于指定高度的块级元素上）1.overflow：visible;文本内容不会被修剪，会溢出到元素框外。2.over:hidden;文本内容会被裁剪，并且元素框外的内容是不可见的。3.over:scroll;内容会被裁剪，但浏览器会显示滚动条以便查看其他内容。4.over:auto;和over:scroll;类似，但是over:scroll;默认形成滚动条，而over:auto;只在需要时形成滚动条，当文本不出现溢出时便不会形成滚动条2.代码实践

推荐整理分享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>

运行结果：

本文链接地址:https://www.jiuchutong.com/zhishi/297683.html 转载请保留说明！

上一篇：YOLOv5源码逐行超详细注释与解读（4）——验证部分val（test）.py(yolov5源码讲解)

下一篇：【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏(前端yck)