长篇文章若直接全量展示，易导致用户阅读疲劳并增加跳出率；而简单粗暴的截断处理则显得生硬粗糙，严重影响页面质感。
本文分享一套高颜值长文本折叠方案。该方案基于纯原生代码实现，零插件依赖，通过渐变遮罩与悬浮下划线动画，打造极致的阅读交互体验。
核心功能亮点
- 渐变遮罩过渡：折叠状态下底部采用渐变虚化处理，告别生硬截断，视觉过渡自然柔和。
- 极简文字交互：去除冗余按钮样式，仅保留纯文字触发入口，保持页面整洁。
- 动态悬浮反馈：鼠标悬停时下划线平滑显现，细腻的交互细节提升页面精致感。
- 丝滑开合动画：高度变化采用渐变过渡，展开与收起过程流畅无卡顿、无闪烁。
- 状态直观清晰：搭配上下箭头标识，文本展开或收起状态一目了然。
- 通用居中布局：交互入口默认居中，完美适配各类页面视觉结构。
完整代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章折叠｜简约文字链接样式</title>
<style>
.article-box {
max-width: 700px;
margin: 30px auto;
padding: 20px;
}
.article-wrap {
position: relative;
}
.article-content {
line-height: 1.8;
font-size: 16px;
overflow: hidden;
max-height: 120px;
transition: max-height 0.4s ease;
}
.article-content.expand {
max-height: 2000px;
}
/* 渐变遮罩 */
.mask {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background: linear-gradient(transparent, #ffffff);
pointer-events: none;
transition: opacity 0.3s;
}
.article-wrap.expand .mask {
opacity: 0;
}
/* 链接容器居中 */
.toggle-wrap{
text-align:center;
margin-top:16px;
}
/* 简约文字链接样式 */
.toggle-link {
font-size: 14px;
color: #2b78e4;
cursor: pointer;
transition: all 0.2s;
border: none;
background: transparent;
}
.toggle-link:hover {
color: #1b5fbd;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="article-box">
<div class="article-wrap" id="wrap">
<div class="article-content" id="content">
<p>这里放长文章内容，文字很多的时候默认折叠。</p>
<p>长文本段落 1：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>长文本段落 2：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>长文本段落 3：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>长文本段落 4：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>长文本段落 5：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>长文本段落 6：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="mask"></div>
</div>
<div class="toggle-wrap">
<button class="toggle-link" id="btn">展开全文 ▾</button>
</div>
</div>
<script>
const content = document.getElementById('content');
const wrap = document.getElementById('wrap');
const btn = document.getElementById('btn');
btn.onclick = function() {
content.classList.toggle('expand');
wrap.classList.toggle('expand');
if(content.classList.contains('expand')){
btn.innerText = '收起全文 ▴';
}else{
btn.innerText = '展开全文 ▾';
}
}
</script>
</body>
</html>定制化调整指南
调整默认展示高度
修改 CSS 中.article-content的max-height属性（默认为 120px）。数值越大，折叠状态下展示的文本行数越多。
优化渐变遮罩效果
调整.mask类的height值可改变渐变过渡的范围。建议将渐变底色#ffffff替换为实际页面背景色，以确保视觉融合自然。
更换主题配色
全局替换代码中的#2b78e4颜色值，即可同步更新文字及下划线颜色，快速适配网站整体主题风格。
调节动画速度
修改max-height的过渡时间（如 0.4s）可调整文本开合速度；修改width或相关属性的过渡时间（如 0.2s）可控制下划线浮现速率。
适用场景
该方案具备极强的通用性，适用于绝大多数长文本展示场景：
- 公众号内嵌网页、图文详情页
- 个人博客、技术文档的长内容展示
- 企业官网的新闻、公告及产品介绍页
- H5 活动页、知识科普及资讯类页面
这套长文本折叠方案以极简代码实现了专业级视觉交互。其轻量无依赖、兼容性强的特点，不仅能优化首屏展示效果、降低用户跳出率，更能显著提升页面整体质感，是长文本页面的理想解决方案，可直接落地复用。
前端开发 网页交互