实现多行文本展开收起效果主要依赖于CSS的伪类选择器和HTML的结构。以下是一个简单的实现方法：
- HTML结构：
<div class="text-container">
<p class="text">
这是一段很长的文本，默认显示三行，点击按钮后可以展开显示全部内容，再次点击则收起。
这是第二行。
这是第三行。
这是第四行，默认是隐藏的，点击展开后可见。
这是第五行，同样默认是隐藏的。
</p>
<button class="toggle-btn">展开/收起</button>
</div>
- CSS样式：
.text-container {
width: 300px;
margin: 20px auto;
}
.text {
display: -webkit-box;
-webkit-line-clamp: 3; /* 默认显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease; /* 动画效果 */
}
.text.expanded {
-webkit-line-clamp: unset; /* 展开时显示全部内容 */
height: auto;
}
.toggle-btn {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
- JavaScript交互：
虽然题目要求使用纯CSS，但为了实现点击按钮切换展开和收起的状态，我们还是需要用到一点JavaScript。如果你希望完全避免JavaScript，可以考虑使用checkbox或radio的:checked伪类来实现，但那样会增加HTML的复杂性。
以下是简单的JavaScript实现：
document.querySelector('.toggle-btn').addEventListener('click', function() {
var text = document.querySelector('.text');
text.classList.toggle('expanded'); // 切换expanded类名
});
注意：-webkit-line-clamp是一个非标准的WebKit属性，主要用于Chrome和Safari。在其他浏览器中可能不支持。为了更广泛的兼容性，你可能需要使用其他方法或库来实现类似的效果。
如果你希望完全避免-webkit-line-clamp，可以考虑使用其他技术，如使用JavaScript动态计算行数并设置高度，或者使用第三方库。但那样会增加实现的复杂性。