超出宽度换行,超出高度显示省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CENTER</title>
		<style>
			.box {
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.child {
				max-width: 50px;
				background-color: white;
				word-break: break-all;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				172839717283971728397172839717283971728397172839717283971728397
			</div>
		</div>
	</body>
</html>
posted @ 2022-04-08 13:53  bcj7wi3kd5h1wd6  阅读(14)  评论(0编辑  收藏  举报