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) + '...';
}