文字溢出显示省略号

最新推荐文章于 2024-04-13 16:49:16 发布

原创最新推荐文章于 2024-04-13 16:49:16 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bg{
				width: 400px;
				border:1px solid red;
				
				/*这三条是捆绑的 分开就实现不了*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				/*
				 * 包含文字的容器不能靠内容撑开
				 * 	可以设置的值
				 * 		ellipsis  出现省略号
				 * 		clip 	   溢出内容直接剪掉
				 */
			}
		</style>
	</head>
	<body>
		<div id="bg">
			溢出显示省略号溢出显示省略号溢出显示省略号溢出显示省略号
		</div>
	</body>
</html>

显示效果: