本帖最后由 拨Q 于 2023-4-11 10:25 编辑
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>展开收起文本</title>
<style>
.text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-container.expanded .text {
-webkit-line-clamp: unset;
}
.expand-button {
display: none;
}
.text-container.expanded .expand-button {
display: inline-block;
}
</style>
</head>
<body>
<div class="text-container">
<p class="text">
“闻春雷而动，濯春雨而发”，因形美味鲜气清，春笋被誉为“蔬中第一珍”。近日，患有十二指肠溃疡的王先生却因多日食用春笋发生呕血、晕厥。医生表示，春笋含有粗纤维难以消化，大量食用会刺激肠胃，尤其是胃病患者，容易造成消化道出血。北京中医药大学东直门医院通州院区脾胃病科主治医师茹淑瑛介绍，除春笋外，辛辣刺激、容易引发胀气、不易消化以及生冷食物等都不适宜肠胃不适人群食用。“咖啡、浓茶、酒、辣椒、韭菜等属于辛辣刺激食物，土豆、红薯、芋头、南瓜、板栗、豆浆等属于易胀气食物，年糕、粽子、汤圆等属于不易消化食物。此外，油炸食品、冰镇食品、甜点等也要少吃。”茹淑瑛解释道。“春季养胃以食养为主，也要避免冷热交替导致的胃肠型感冒。此外，保持良好情绪、养成分餐进食习惯也有益。”最后，茹淑瑛介绍几款春季养胃药膳。
</p>
<button class="expand-button">展开</button>
</div>
<script>
const textContainer = document.querySelector('.text-container');
const text = document.querySelector('.text');
const expandButton = document.querySelector('.expand-button');
if (text.offsetHeight > textContainer.offsetHeight) {
expandButton.style.display = 'inline-block';
}
expandButton.addEventListener('click', () => {
textContainer.classList.toggle('expanded');
if (textContainer.classList.contains('expanded')) {
expandButton.textContent = '收起';
} else {
expandButton.textContent = '展开';
}
});
</script>
</body>
</html>
想要实现让文本内容超过三行，用省略号展示，并且显示展开按钮，点击展开可对文章进行展开收起操作，这里省略号是有了，但是展开和收起没有。
想让大佬看看怎么改，谢谢大佬 | 
发表于 2023-4-11 09:38
