CSS多行文本限制字数是Web前端开发中非常常用的一项技术，通常会用在新闻、公告、博客等地方，使得页面的视觉效果更加统一。下面介绍几种常见的方法：

/* 第一种方法：使用text-overflow */
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行 */
}
/* 第二种方法：使用伪元素 */
p {
display: block;
position: relative;
line-height: 1.4em; /* 行高，根据字体进行调节 */
max-height: 2.8em; /* 限制显示两行 */
overflow: hidden;
padding-right: 1em; /* 空出“...”的位置 */
}
p::before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
/* 第三种方法：使用clamp() */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行 */
max-height: 2.8em; /* 限制显示两行 */
overflow: hidden;
}
p {
font-size: clamp(1rem, 1.2vw, 1.2rem); /* 自适应字号 */
line-height: clamp(1.4em, 1.68vw, 1.68em); /* 自适应行高 */
}
/* 第四种方法：使用JavaScript */
// 获取p元素
let pBox = document.querySelector('p');
// 获取p元素的内容
let text = pBox.innerHTML;
// 将p元素的内容用substring截取
if (text.length >50) {
pBox.innerHTML = text.substring(0, 50) + '...';
}