<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--单行文本省略号-->
.p1{
width:100px;
height:30px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
<!--多行文本省略号-->
.p2{
width:100px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;/*控制哪一行超出显示....*/
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p class="p1">
css小米商城|MIUI|IoT|云服务|金融|有品|小爱开放平台|政企服务|资质证照|协议规则|下载app|Select Region购物车（0）
</p>
<p class="p2">
css小米商城|MIUI|IoT|云服务|金融|有品|小爱开放平台|政企服务|资质证照|协议规则|下载app|Select Region
css小米商城|MIUI|IoT|云服务|金融|有品|小爱开放平台|政企服务|资质证照|协议规则|下载app|Select Region
css小米商城|MIUI|IoT|云服务|金融|有品|小爱开放平台|政企服务|资质证照|协议规则|下载app|Select Region
</p>
</body>
</html>
