1.单行文本省略
css属性：
white-space：nowrap ====>禁止文本换行
overflow：hidden ====>隐藏超出容器范围的内容
text-overflow：ellipsis====>使用省略号表示被隐藏的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行文本省略示例</title>
<style>
.single-line-ellipsis {
width: 200px; /* 容器宽度 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出范围的内容 */
text-overflow: ellipsis; /* 使用省略号 */
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="single-line-ellipsis">
这是一个很长的文本，超过了容器的宽度，将会显示省略号。
</div>
</body>
</html>
2.多行文本省略
display: -webkit-box: 将元素设置为WebKit内核的弹性盒子模型。
-webkit-box-orient: vertical: 设置弹性盒子的排列方向为垂直。
-webkit-line-clamp: 2: 显示的文本行数。
overflow: hidden: 隐藏超出容器范围的内容。
<div class="title">
空军副司令员:新型战机将在珠海航展公开露面空军副司令员:新型战机将在珠海航展公开露面
</div>
<style>
.title{
width: 220px;
height: 50px;
line-height: 25px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden
}
</style>
要实现多行文本省略，只需修改 -webkit-line-clamp 的值为需要显示的行数即可
