html限制显示n行尾部三个点效果，防止外部padding对现实效果的影响；
查看更多 & 收起 / 显示全部 & 收起
效果图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.ellipsis-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制显示行数 */
-webkit-box-orient: vertical;
word-break: break-all; /* 防止长单词破坏布局 */
line-height: 1.5; /* 根据实际字体大小调整，默认单位em */
max-height: calc(1.5em * 3); /* 行数×行高 根据line-height计算最大高度 */
max-width: 35vw;
text-align: start;
background: yellow;
}
/* js代码通过动态调整 truncate 和 .truncate.expanded 属性来控制“显示n行效果”和“显示全部” */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制显示的行数 */
-webkit-box-orient: vertical;
word-break: break-all;
line-height: 1.5em;
max-height: calc(1.5em * 3);
transition: max-height 0.25s ease-out;
}
.truncate.expanded {
-webkit-line-clamp: unset;
max-height: none;
}
.toggle-button {
cursor: pointer;
color: blue;
text-decoration: underline;
width: 80px;
background-color: yellow; /* 背景颜色以便观察效果 */
}
</style>
<script>
/* 写法一 页面DOM加载完成后，自动到对应id的元素，限制该元素加载文本长度。
实际开发中一般写在foreach里面，如果涉及到多个单独的组件，建议使用“写法二”*/
document.addEventListener("DOMContentLoaded", function() {
let cell = document.getElementById('contentCell_1');
cell.textContent = cell.textContent.slice(0, 150);
});
/*写法二 效果同写法一 */
function sliceTextContent(id) {
return function() {
let cell = document.getElementById(id);
cell.textContent = cell.textContent.slice(0, 150);
};
}
document.addEventListener("DOMContentLoaded", sliceTextContent('contentCell_2'));
document.addEventListener("DOMContentLoaded", sliceTextContent('contentCell_3'));
//...
//查看更多 & 收起
function toggleText() {
const textElement = document.getElementById('textElement');
const button = document.querySelector('.toggle-button');
if (textElement.classList.contains('expanded')) {
textElement.classList.remove('expanded');
button.textContent = '查看更多';
} else {
textElement.classList.add('expanded');
button.textContent = '收起';
}
}
</script>
</head>
<body>
<b>1.普通的限制三行结尾带三个点。缺点是div实际上把全部文本内容都加载了，只是外观看上去显示了三行而已，掩耳盗铃，不够优雅！【用“审查元素”查看该div字数】</b>
<div class="ellipsis-text">
央广网开封1月15日消息（记者 郝振青）2025年春节是成功申遗后的第一个春节。随着春节的脚步日益临近，各地大街小巷年味愈来愈浓，不少商家提前策划一系列新春活动，举办各类消费活动，推动节前消费市场和文旅市场迎来新一轮的火热，让新年经济释放出新活力。
记者走访河南省开封市发现，各具特色的“蛇年主题”春联、木版年画、灯笼等商品悄然走红，不少市民已开始置办年货。在市民的年货清单里，各类老字号“正当红”。
在鼓楼区书店街，番茄味、蟹黄味、牛肉味等多口味麻花弥漫着特有的香味，吸引了众多消费者前来排队购买。“我们是一家本地老字号店。临近春节了，店里的订单量特别多，每天客流量达2000多人次，加工厂也在24小时加班加点赶制礼盒。”张记麻花负责人张小利说。
距离该店1公里多的羊楼饭庄，是一家有着100多年历史的老字号餐饮店。“从腊月初八开始，店里的顾客明显增多，我们也推出了清真八大碗年货礼盒，为市民年夜饭增加更多选择。”该店负责人杜雨阳表示，目前店里已接到了200多套礼盒订单。
对于中式服装传统技艺第三代传承人胡秋兰来说，每年春节前都是她一年中最忙的时候。“经过多年研究，我们将传统非遗技艺与现代审美相结合，制作出了中式风衣、新中式等服装，越来越多的人希望穿中式服装过中国年。很多顾客从去年10月份就开始定做了春节的新衣服，宋锦布料最受欢迎。现在店里订单爆满，已经不接单了。”胡秋兰一边赶制顾客的“新年战袍”，一边向记者介绍道。
节前消费“热”起来，新年经济“火”起来，文旅消费新产品也要“上新”。
</div>
<b>2.只使用css限制三行还不够，需要配合js代码限制组件渲染的总字数才是货真价实。【用“审查元素”查看该div字数】</b>
<div id="contentCell_1" class="ellipsis-text">
央广网开封1月15日消息（记者 郝振青）2025年春节是成功申遗后的第一个春节。随着春节的脚步日益临近，各地大街小巷年味愈来愈浓，不少商家提前策划一系列新春活动，举办各类消费活动，推动节前消费市场和文旅市场迎来新一轮的火热，让新年经济释放出新活力。
记者走访河南省开封市发现，各具特色的“蛇年主题”春联、木版年画、灯笼等商品悄然走红，不少市民已开始置办年货。在市民的年货清单里，各类老字号“正当红”。
在鼓楼区书店街，番茄味、蟹黄味、牛肉味等多口味麻花弥漫着特有的香味，吸引了众多消费者前来排队购买。“我们是一家本地老字号店。临近春节了，店里的订单量特别多，每天客流量达2000多人次，加工厂也在24小时加班加点赶制礼盒。”张记麻花负责人张小利说。
距离该店1公里多的羊楼饭庄，是一家有着100多年历史的老字号餐饮店。“从腊月初八开始，店里的顾客明显增多，我们也推出了清真八大碗年货礼盒，为市民年夜饭增加更多选择。”该店负责人杜雨阳表示，目前店里已接到了200多套礼盒订单。
对于中式服装传统技艺第三代传承人胡秋兰来说，每年春节前都是她一年中最忙的时候。“经过多年研究，我们将传统非遗技艺与现代审美相结合，制作出了中式风衣、新中式等服装，越来越多的人希望穿中式服装过中国年。很多顾客从去年10月份就开始定做了春节的新衣服，宋锦布料最受欢迎。现在店里订单爆满，已经不接单了。”胡秋兰一边赶制顾客的“新年战袍”，一边向记者介绍道。
节前消费“热”起来，新年经济“火”起来，文旅消费新产品也要“上新”。
</div>
<b>3.实战：table td内容限制三行。会受到全局td padding影响，如何调整样式。</b>
<table>
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>受到全局td padding的影响显示效果异常，第四行多显示半拉脑袋。。。</td>
<td class="ellipsis-text">央广网开封1月15日消息（记者 郝振青）2025年春节是成功申遗后的第一个春节。随着春节的脚步日益临近，各地大街小巷年味愈来愈浓，不少商家提前策划一系列新春活动，举办各类消费活动，推动节前消费市场和文旅市场迎来新一轮的火热，让新年经济释放出新活力。
记者走访河南省开封市发现，各具特色的“蛇年主题”春联、木版年画、灯笼等商品悄然走红，不少市民已开始置办年货。在市民的年货清单里，各类老字号“正当红”。
在鼓楼区书店街，番茄味、蟹黄味、牛肉味等多口味麻花弥漫着特有的香味，吸引了众多消费者前来排队购买。“我们是一家本地老字号店。临近春节了，店里的订单量特别多，每天客流量达2000多人次，加工厂也在24小时加班加点赶制礼盒。”张记麻花负责人张小利说。
距离该店1公里多的羊楼饭庄，是一家有着100多年历史的老字号餐饮店。“从腊月初八开始，店里的顾客明显增多，我们也推出了清真八大碗年货礼盒，为市民年夜饭增加更多选择。”该店负责人杜雨阳表示，目前店里已接到了200多套礼盒订单。
对于中式服装传统技艺第三代传承人胡秋兰来说，每年春节前都是她一年中最忙的时候。“经过多年研究，我们将传统非遗技艺与现代审美相结合，制作出了中式风衣、新中式等服装，越来越多的人希望穿中式服装过中国年。很多顾客从去年10月份就开始定做了春节的新衣服，宋锦布料最受欢迎。现在店里订单爆满，已经不接单了。”胡秋兰一边赶制顾客的“新年战袍”，一边向记者介绍道。
节前消费“热”起来，新年经济“火”起来，文旅消费新产品也要“上新”。
</td>
</tr>
<tr>
<td>2</td>
<td>嵌套一层div就好了【用“审查元素”查看该div字数进行验证】</td>
<td><div id="contentCell_2" class="ellipsis-text">央广网开封1月15日消息（记者 郝振青）2025年春节是成功申遗后的第一个春节。随着春节的脚步日益临近，各地大街小巷年味愈来愈浓，不少商家提前策划一系列新春活动，举办各类消费活动，推动节前消费市场和文旅市场迎来新一轮的火热，让新年经济释放出新活力。
记者走访河南省开封市发现，各具特色的“蛇年主题”春联、木版年画、灯笼等商品悄然走红，不少市民已开始置办年货。在市民的年货清单里，各类老字号“正当红”。
在鼓楼区书店街，番茄味、蟹黄味、牛肉味等多口味麻花弥漫着特有的香味，吸引了众多消费者前来排队购买。“我们是一家本地老字号店。临近春节了，店里的订单量特别多，每天客流量达2000多人次，加工厂也在24小时加班加点赶制礼盒。”张记麻花负责人张小利说。
距离该店1公里多的羊楼饭庄，是一家有着100多年历史的老字号餐饮店。“从腊月初八开始，店里的顾客明显增多，我们也推出了清真八大碗年货礼盒，为市民年夜饭增加更多选择。”该店负责人杜雨阳表示，目前店里已接到了200多套礼盒订单。
对于中式服装传统技艺第三代传承人胡秋兰来说，每年春节前都是她一年中最忙的时候。“经过多年研究，我们将传统非遗技艺与现代审美相结合，制作出了中式风衣、新中式等服装，越来越多的人希望穿中式服装过中国年。很多顾客从去年10月份就开始定做了春节的新衣服，宋锦布料最受欢迎。现在店里订单爆满，已经不接单了。”胡秋兰一边赶制顾客的“新年战袍”，一边向记者介绍道。
节前消费“热”起来，新年经济“火”起来，文旅消费新产品也要“上新”。
</div></td>
</tr>
</tbody>
</table>
<b>4.文本截断与展开示例（查看更多 & 收起）</b>
<div class="container">
<div id="textElement" class="truncate">央广网开封1月15日消息（记者 郝振青）2025年春节是成功申遗后的第一个春节。随着春节的脚步日益临近，各地大街小巷年味愈来愈浓，不少商家提前策划一系列新春活动，举办各类消费活动，推动节前消费市场和文旅市场迎来新一轮的火热，让新年经济释放出新活力。
记者走访河南省开封市发现，各具特色的“蛇年主题”春联、木版年画、灯笼等商品悄然走红，不少市民已开始置办年货。在市民的年货清单里，各类老字号“正当红”。
在鼓楼区书店街，番茄味、蟹黄味、牛肉味等多口味麻花弥漫着特有的香味，吸引了众多消费者前来排队购买。“我们是一家本地老字号店。临近春节了，店里的订单量特别多，每天客流量达2000多人次，加工厂也在24小时加班加点赶制礼盒。”张记麻花负责人张小利说。
距离该店1公里多的羊楼饭庄，是一家有着100多年历史的老字号餐饮店。“从腊月初八开始，店里的顾客明显增多，我们也推出了清真八大碗年货礼盒，为市民年夜饭增加更多选择。”该店负责人杜雨阳表示，目前店里已接到了200多套礼盒订单。
对于中式服装传统技艺第三代传承人胡秋兰来说，每年春节前都是她一年中最忙的时候。“经过多年研究，我们将传统非遗技艺与现代审美相结合，制作出了中式风衣、新中式等服装，越来越多的人希望穿中式服装过中国年。很多顾客从去年10月份就开始定做了春节的新衣服，宋锦布料最受欢迎。现在店里订单爆满，已经不接单了。”胡秋兰一边赶制顾客的“新年战袍”，一边向记者介绍道。
节前消费“热”起来，新年经济“火”起来，文旅消费新产品也要“上新”。
</div>
<div class="toggle-button" onclick="toggleText()">查看更多</div>
</div>
</body>
</html>
