CSS 文本溢出 —— overflow

最新推荐文章于 2024-08-28 17:54:22 发布

白菜执笔人

最新推荐文章于 2024-08-28 17:54:22 发布

阅读量564

点赞数

分类专栏： Web 前端基础

本文链接：https://blog.csdn.net/qq_43621629/article/details/102641659

版权

Web 前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web前端基础学习笔记

CSS 文本溢出 - overflow 使用

verflow 属性：定义溢出元素内容区的内容会如何处理

语法： { overflow: visible / hidden / scroll / auto / inherit; }

说明:

visible: 默认值，内容不会被修剪，会出现在元素框之外；
hidden: 内容会被修剪,并且其余内容是不可见的；
scroll: 内容会被修剪，但是浏览器显示滚动条；
auto: 如果内容超出，则会显示滚动条，不超出->不显示；
inherit: 规定应该从父元素继承 overflow 属性的值。

例：（注意根据注释修改值，观察效果）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 文本溢出 - overflow</title>
	<style>
		.box,.in{
			height: 400px;
			width: 800px;
			border: 5px solid red;
		}
		.box1,.in1{
			height: 200px;
			width: 300px;
			padding: 10px;
			background-color: yellow;
			float: left;
			/*overflow: hidden;*/				/* 纵横 方向都添加滚动条 */
			overflow: auto;						/* 自动根据溢出的方向添加滚动条 */
		}
		.box2{
			height: 100%;
			width: 480px;
			background-color: pink;
			float: left;
		}


		.in{ overflow: auto; }
		.in1{ overflow: inherit; }
	</style>
</head>
<body>
	<h3>一、hidden 与 auto</h3>
	<div class="box">
		<div class="box1">
		1.verflow属性：定义溢出元素内容区的内容会如何处理<br><br>
		2.语法:{overflow:visible/hidden/scroll/auto/inherit;}<br><br>
		说明:<br><br>
			visible:默认值，内容不会被修剪，会出现在元素框之外；<br><br>
			hidden:内容会被修剪,并且其余内容是不可见的;<br><br>
			scroll:内容会被修剪，但是浏览器显示滚动条;<br><br>
			auto:如果内容超出，则会显示滚动条，不超出->不显示;<br><br>
			inherit:规定应该从父元素继承overflow属性的值;
		</div>
		<div class="box2"></div>
	</div>
	<br><hr><br>


	<h3>二、inherit</h3>
	<p> inherit 规定应该从父元素继承 overflow 属性的值,所以是相对与父类来用的</p>
	<div class="in">
		1.verflow属性：定义溢出元素内容区的内容会如何处理<br><br>
		2.语法:{overflow:visible/hidden/scroll/auto/inherit;}<br><br>
		说明:<br><br>
			visible:默认值，内容不会被修剪，会出现在元素框之外；<br><br>
			hidden:内容会被修剪,并且其余内容是不可见的;<br><br>
			scroll:内容会被修剪，但是浏览器显示滚动条;<br><br>
			auto:如果内容超出，则会显示滚动条，不超出->不显示;<br><br>
			inherit:规定应该从父元素继承overflow属性的值;
		1.verflow属性：定义溢出元素内容区的内容会如何处理<br><br>
		2.语法:{overflow:visible/hidden/scroll/auto/inherit;}<br><br>
		说明:<br><br>
			visible:默认值，内容不会被修剪，会出现在元素框之外；<br><br>
			hidden:内容会被修剪,并且其余内容是不可见的;<br><br>
			scroll:内容会被修剪，但是浏览器显示滚动条;<br><br>
			auto:如果内容超出，则会显示滚动条，不超出->不显示;<br><br>
			inherit:规定应该从父元素继承overflow属性的值;
		<div class="in1">
		1.verflow属性：定义溢出元素内容区的内容会如何处理<br><br>
		2.语法:{overflow:visible/hidden/scroll/auto/inherit;}<br><br>
		说明:<br><br>
			visible:默认值，内容不会被修剪，会出现在元素框之外；<br><br>
			hidden:内容会被修剪,并且其余内容是不可见的;<br><br>
			scroll:内容会被修剪，但是浏览器显示滚动条;<br><br>
			auto:如果内容超出，则会显示滚动条，不超出->不显示;<br><br>
			inherit:规定应该从父元素继承overflow属性的值;
		</div>
		<div class="box2"></div>
	</div>
</body>
</html>