【web前端(二十二)】html_over-flow(溢出)

关注

原创最新推荐文章于 2026-06-17 11:28:03 发布 1.6w 阅读 AI 写同款· GEO 优化 ›

CSS Overflow 属性详解 CSS Overflow 属性主要用来控制元素内容溢出的行为。当元素的内容超出了其设定的大小限制时，该属性决定了元素是显示滚动条、隐藏超出部分还是进行其他处理。CSS Overflow 属性在网页设计中扮演着重要角色，它可以帮助我们更好地控制元素内容溢出的行为。通过合理运用该属性，我们可以实现丰富的视觉效果，提升用户体验。在开发过程中，了解并熟练掌握 CSS Overflow 属性，将有助于我们更好地应对各种挑战。阅读详情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>over-flow(溢出)</title>
		<style>
			li{
				width: 100px;
				height: 20px;
				background-color: #87CEEB;
				border: 1px solid #000;
				white-space:nowrap;
				overflow:hidden;
				text-overflow: ellipsis;
			}
			
			.c1{
				width: 100px;
				height: 20px;
				background-color: #87CEEB;
				border: 1px solid #000;
				/*折行*/
				/*white-space: normal;*/
				overflow:hidden;
				/*文字有溢出，可用ellipsis实现省略。*/
				text-overflow: ellipsis;
			}

		</style>
	</head>
	<body>
		<div class="c1">asdfghjklasdfghjklasdffghjklasdfghjkl</div>
		<ur>
			<li>北三环大明宫建材家居博览中心 qwer tyui opas dfgh jklz xcvb nm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
		</ur>
	</body>
</html>