本篇文章主打实用，主要记录单行/多行文本溢出显示省略号的方法
1.单行文本溢出显示省略号
<html>
<head>
<title>单行文本溢出显示省略号</title>
</head>
<body>
<style>
.single-line-ellipsis {
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
width: 200px; /* 必须设置宽度 */
}
</style>
<div class="single-line-ellipsis">
这是一段很长的文本，当宽度不足以显示全部内容时会显示省略号。（邢同学爱折腾）
</div>
</body>
</html>
以上是纯CSS实现的单行文本溢出显示省略号方法。简单易用；可直接用到项目中去。
2.多行文本溢出显示省略号，纯CSS的方法
<html>
<head>
<meta charset="UTF-8">
<title>多行文本溢出显示省略号 纯css实现</title>
</head>
<body>
<style>
.multi-line-ellipsis {
display: -webkit-box; /* 必须 */
-webkit-box-orient: vertical; /* 必须 */
-webkit-line-clamp: 3; /* 显示的行数 */
overflow: hidden; /* 必须 */
width: 300px; /* 建议设置宽度 */
}
</style>
<div class="multi-line-ellipsis">
这是一段很长的多行文本内容，当超过设定的行数时会自动显示省略号。
（邢同学爱折腾，邢同学爱折腾，邢同学爱折腾，邢同学爱折腾，邢同学爱折腾）
</div>
</body>
</html>
以上办法简单易用，对webkit内核的浏览器较好支持
如果兼容性要求较高；接着看下面方法
3.多行文本溢出显示省略号，CSS搭配JavaScript的方法
<html>
<head>
<meta charset="UTF-8">
<title>多行文本溢出显示省略号 css配合js</title>
</head>
<body>
<style>
.multi-line-ellipsis-alt {
max-height: 60px; /* 限制最大高度，根据行高计算 */
line-height: 20px; /* 设置行高 */
overflow: hidden; /* 隐藏溢出内容 */
position: relative; /* 为伪元素定位 */
width: 300px;
}
.ellipsis.multi-line-ellipsis-alt::after {
content: "..."; /* 显示省略号 */
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
right: 0; /* 右侧对齐 */
padding-left: 20px; /* 留出空间避免重叠 */
/* 创建渐变背景隐藏文本 */
background: linear-gradient(to right, transparent, white 50%);
}
</style>
<div class="multi-line-ellipsis-alt">
<div id="inner-text">
这是另一种实现多行文本溢出省略号的方法，兼容性更好，但需要手动计算高度。
（邢同学爱折腾，邢同学爱折腾，邢同学爱折腾，邢同学爱折腾，邢同学爱折腾）
</div>
</div>
<script>
let height = document.querySelector('#inner-text').clientHeight
if(height > 60) { // 这里根据高度判断是否超出3行文字的高度；如果超出加省略号
document.querySelector('.multi-line-ellipsis-alt').classList.add('ellipsis')
}
</script>
</body>
</html>
上面代码兼容较好；但要配合简单的JavaScript
最后
如果大家有其他更好的方法；欢迎评论区交流。
