css控制文字行数，超出部分用省略号代替

最新推荐文章于 2022-09-21 17:33:52 发布

suixinMLF

最新推荐文章于 2022-09-21 17:33:52 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_29252021/article/details/78415856

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>显示多行文字，多余的用省略号代替</title>
<meta name="author" content="suixinMLF" />
<style>
.centent{
	width:300px;
	height:200px;
	padding:10px;
	font-size:14px;
	line-height:25px;
	border:1px solid #ebebeb;
	display:-webkit-box;
	display:-moz-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-justify-content:center;/*在主轴上对其的方向*/
	justify-content:center;
	-webkit-align-items:center;/*在交叉轴上的对其方式*/
}
.centent div{
	height:75px;
	overflow:hidden;/*须给一个高，以便不支持时不显示超出内容*/
	display:-webkit-box;
	-webkit-line-clamp:3;/*显示3行，超出的用省略号代替*/
	-webkit-box-orient:vertical;
}
</style>
</head>
<body>
<div class="centent">
	<div>让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。</div></div></body></html>

suixinMLF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css控制文字行数，超出部分用省略号代替

显示多行文字，多余的用省略号代替.centent{ width:300px; height:200px; padding:10px; font-size:14px; line-height:25px; border:1px solid #ebebeb; display:-webkit-box; display:-moz-box; display:-webkit-flex;
复制链接

扫一扫