web学习文本溢出。。。

最新推荐文章于 2024-08-26 14:18:59 发布

原创最新推荐文章于 2024-08-26 14:18:59 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

3 篇文章

订阅专栏

这篇博客主要展示了如何使用CSS实现文字截断并显示省略号的效果。通过设置`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`，可以确保长文本在指定宽度内被正确截断，以保持页面整洁。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test html</title>
	
	<style type="text/css">//页面级CSS
		*{
				margin:0;
				padding:0;
				color:#424242;
		}
		p{
			width:300px;
			height:20px;
			line-height:20px;
			
			white-space:nowrap;
			overflow:hidden; //截断
			text-overflow:ellipsis;
		}
		
	</style>
	
</head>

<body>
	
	<p>这个是一个测试的网页是否有点点点这个是一个测试的网页是否有点点点</p>

</body>
<html>