长文本溢出展开/收起功能
实现原理
-
使用CSS的-webkit-line-clamp属性限制文本显示行数
-
通过JavaScript切换CSS类实现展开/收起功能
-
使用max-height属性配合CSS过渡实现平滑动画效果
-
通过比较文本实际高度与限制高度，自动判断是否需要显示展开按钮
成果展示
代码实现
<div class="text-container">
<div class="text-content collapsed" id="text1">
在人工智能快速发展的今天，自然语言处理技术已经取得了显著的进步。从最初的基于规则的方法，到统计学习方法，再到如今的深度学习模型，NLP技术正在不断突破自身的极限。最新的预训练模型如GPT系列、BERT等，已经在多个自然语言理解任务上达到了人类水平甚至超越人类的表现。这些模型通过在海量文本数据上进行预训练，学习到了丰富的语言知识，然后可以通过微调适应各种下游任务。未来，随着模型规模的进一步扩大和训练方法的改进，我们有望看到更加智能、更加通用的自然语言处理系统。
</div>
<button class="toggle-btn collapsed" onclick="toggleText('text1', this)">展开</button>
</div>
.text-container {
position: relative;
overflow: hidden;
}
.text-content {
line-height: 1.6;
color: #555;
transition: max-height 0.5s ease;
overflow: hidden;
}
.text-content.collapsed {
max-height: 4.8em; /* 限制为3行，1.6行高 * 3 = 4.8em */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-content.expanded {
max-height: 1000px; /* 足够大的值确保完全展开 */
}
展开/收起按钮样式
.toggle-btn {
background: none;
border: none;
color: #3498db;
cursor: pointer;
font-weight: 600;
padding: 5px 0;
margin-top: 10px;
display: inline-flex;
align-items: center;
transition: color 0.3s;
}
.toggle-btn:hover {
color: #2980b9;
}
.toggle-btn::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transition: transform 0.3s;
}
.toggle-btn.collapsed::after {
border-top: 5px solid #3498db;
}
.toggle-btn.expanded::after {
border-bottom: 5px solid #3498db;
}
js代码
function toggleText(textId, button) {
const textElement = document.getElementById(textId);
if (textElement.classList.contains("collapsed")) {
// 展开文本
textElement.classList.remove("collapsed");
textElement.classList.add("expanded");
button.textContent = "收起";
button.classList.remove("collapsed");
button.classList.add("expanded");
} else {
// 收起文本
textElement.classList.remove("expanded");
textElement.classList.add("collapsed");
button.textContent = "展开";
button.classList.remove("expanded");
button.classList.add("collapsed");
}
}
// 自动检测文本是否溢出，决定是否显示展开按钮
document.addEventListener("DOMContentLoaded", function () {
const textContainers = document.querySelectorAll(".text-container");
textContainers.forEach((container) => {
const textContent = container.querySelector(".text-content");
const toggleBtn = container.querySelector(".toggle-btn");
// 如果文本内容高度小于等于限制高度，则隐藏展开按钮
if (
textContent.scrollHeight <=
parseInt(getComputedStyle(textContent).lineHeight) * 3
) {
toggleBtn.style.display = "none";
}
});
});
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>长文本溢出展开/收起功能</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
width: 100%;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-weight: 600;
}
.description {
text-align: center;
margin-bottom: 40px;
color: #7f8c8d;
line-height: 1.6;
}
.card {
background: #fff;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-left: 4px solid #3498db;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-title {
font-size: 1.2rem;
margin-bottom: 15px;
color: #2c3e50;
font-weight: 600;
}
.text-container {
position: relative;
overflow: hidden;
}
.text-content {
line-height: 1.6;
color: #555;
transition: max-height 0.5s ease;
overflow: hidden;
}
.text-content.collapsed {
max-height: 4.8em;
/* 限制为3行，1.6行高 * 3 = 4.8em */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-content.expanded {
max-height: 1000px;
/* 足够大的值确保完全展开 */
}
.toggle-btn {
background: none;
border: none;
color: #3498db;
cursor: pointer;
font-weight: 600;
padding: 5px 0;
margin-top: 10px;
display: inline-flex;
align-items: center;
transition: color 0.3s;
}
.toggle-btn:hover {
color: #2980b9;
}
.toggle-btn::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transition: transform 0.3s;
}
.toggle-btn.collapsed::after {
border-top: 5px solid #3498db;
}
.toggle-btn.expanded::after {
border-bottom: 5px solid #3498db;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 0.9rem;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
.card {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>长文本溢出展开/收起功能</h1>
<p class="description">
以下示例展示了如何优雅地处理长文本溢出，并提供展开/收起功能以提升用户体验。
</p>
<div class="card">
<h3 class="card-title">示例一：新闻摘要</h3>
<div class="text-container">
<div class="text-content collapsed" id="text1">
在人工智能快速发展的今天，自然语言处理技术已经取得了显著的进步。从最初的基于规则的方法，到统计学习方法，再到如今的深度学习模型，NLP技术正在不断突破自身的极限。最新的预训练模型如GPT系列、BERT等，已经在多个自然语言理解任务上达到了人类水平甚至超越人类的表现。这些模型通过在海量文本数据上进行预训练，学习到了丰富的语言知识，然后可以通过微调适应各种下游任务。未来，随着模型规模的进一步扩大和训练方法的改进，我们有望看到更加智能、更加通用的自然语言处理系统。
</div>
<button class="toggle-btn collapsed" onclick="toggleText('text1', this)">
展开
</button>
</div>
</div>
<div class="card">
<h3 class="card-title">示例二：产品描述</h3>
<div class="text-container">
<div class="text-content collapsed" id="text2">
这款智能手表采用了最新的生物传感技术，能够实时监测用户的心率、血氧饱和度、压力水平等多项健康指标。它配备了1.5英寸AMOLED显示屏，分辨率达到400×400像素，显示效果清晰细腻。手表支持50米防水，可以在游泳时佩戴。内置GPS模块可以精准记录运动轨迹，配合专业的运动算法，能够分析跑步、骑行、游泳等多种运动数据。电池续航时间长达7天，支持无线充电，充电15分钟即可使用一整天。此外，它还支持消息提醒、音乐控制、移动支付等实用功能，是您健康生活和高效工作的理想伴侣。
</div>
<button class="toggle-btn collapsed" onclick="toggleText('text2', this)">
展开
</button>
</div>
</div>
<div class="card">
<h3 class="card-title">示例三：用户评论</h3>
<div class="text-container">
<div class="text-content collapsed" id="text3">
这是我使用过的最好的产品之一！从下单到收货只用了两天时间，包装非常精美。产品外观设计简约大方，材质手感极佳。使用体验方面，操作简单直观，响应速度快，功能齐全且实用。特别是它的智能提醒功能，帮我避免了好几次忘记重要事项的情况。电池续航能力也很出色，正常使用情况下可以坚持一周不需要充电。虽然价格略高于同类产品，但考虑到它的优秀性能和精致做工，我认为物有所值。强烈推荐给注重生活品质的朋友们！
</div>
<button class="toggle-btn collapsed" onclick="toggleText('text3', this)">
展开
</button>
</div>
</div>
<div class="footer">
<p>长文本溢出展开/收起功能实现示例 © 2023</p>
</div>
</div>
<script>
function toggleText(textId, button) {
const textElement = document.getElementById(textId);
if (textElement.classList.contains("collapsed")) {
// 展开文本
textElement.classList.remove("collapsed");
textElement.classList.add("expanded");
button.textContent = "收起";
button.classList.remove("collapsed");
button.classList.add("expanded");
} else {
// 收起文本
textElement.classList.remove("expanded");
textElement.classList.add("collapsed");
button.textContent = "展开";
button.classList.remove("expanded");
button.classList.add("collapsed");
}
}
// 自动检测文本是否溢出，决定是否显示展开按钮
document.addEventListener("DOMContentLoaded", function () {
const textContainers = document.querySelectorAll(".text-container");
textContainers.forEach((container) => {
const textContent = container.querySelector(".text-content");
const toggleBtn = container.querySelector(".toggle-btn");
// 如果文本内容高度小于等于限制高度，则隐藏展开按钮
if (
textContent.scrollHeight <=
parseInt(getComputedStyle(textContent).lineHeight) * 3
) {
toggleBtn.style.display = "none";
}
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号