当元素内容超出其容器大小时,CSS overflow
属性用于控制溢出内容的显示方式。它有多个可选值,用于不同的情况和需求。以下是最常用的 overflow
属性值:文章来源:https://www.toymoban.com/news/detail-850844.html
-
overflow: visible
: 默认值。当内容超出容器大小时,会溢出容器并显示在容器外部,可能会遮盖其他元素。 -
overflow: hidden
: 当内容超出容器大小时,会被裁剪并隐藏,不显示溢出部分。 -
overflow: scroll
: 当内容超出容器大小时,会显示滚动条以便查看溢出的内容。即使内容未超出容器大小,也会始终显示滚动条。 -
overflow: auto
: 类似于scroll
,当内容超出容器大小时,会显示滚动条。如果内容未超出容器大小,将不会显示滚动条。 -
overflow-x
和overflow-y
: 用于分别控制水平和垂直方向上的溢出行为。例如,overflow-x: scroll
只在水平方向上显示滚动条,垂直方向不显示。
这些属性通常用于容器元素,例如 <div>
或 <section>
,以控制其内部内容的显示方式。可以根据实际需求选择适当的 overflow
属性值。例如,如果你希望内容溢出时自动显示滚动条以便查看,可以使用 overflow: auto
。如果你希望内容溢出时隐藏,可以使用 overflow: hidden
。文章来源地址https://www.toymoban.com/news/detail-850844.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow属性</title>
<style>
.wp{
width: 200px;
height: 200px;
border: 10px rgb(26, 17, 17) solid;
overflow: auto;
}
.txt{
width: 200px;
height: 200px;
border: 1px #f00 solid;
line-height: 30px;
overflow-y: scroll;
}
.son{
background: #F00;
width: 280px;
height: 150px;
color: #ff0;
}
.line{
width: 300px;
height: 30px;
line-height: 30px;
border: 1px #f00 solid;
/* 超出隐藏 */
overflow: hidden;
/* 强制不换行 */
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<!--
overflow 属性
处理子级内容超出当前容器的 部分内容,主要是对父级元素添加该属性
值:
hidden 超出部分隐藏
scroll 滚动查看超出的部分
auto 自动渲染超出部分
overflow-x 控制x轴方向的超出部分
overflow-y 控制y轴方向的超出部分
white-space 属性 设置文本的格式
nowrap 强制不换行
normal 强制换行
text-overflow: 对超出的文本内容进行剪裁
ellipsis 省略号
clip 直接裁掉超出的文本内容
单行文本超出添加省略号
overflow: hidden;
/* 强制不换行 */
white-space: nowrap;
text-overflow: ellipsis;
-->
<div class="wp">
<div class="son">一寸山河一寸血</div>
<div class="son">十万青年十万军</div>
</div>
<div class="wp"></div>
<p class="txt">
一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。
一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。
一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。
</p>
<p class="line">一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。</p>
<p class="line">一寸山河一寸血,十万青年十万军。一寸山河一寸血,十万青年十万军。</p>
</body>
</html>
到了这里,关于前端必知:7.overflow 属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!