使用纯CSS实现多行文本展开收起效果

实现多行文本展开收起效果主要依赖于CSS的伪类选择器和HTML的结构。以下是一个简单的实现方法：

1. HTML结构：

<div class="text-container">
    <p class="text">
        这是一段很长的文本，默认显示三行，点击按钮后可以展开显示全部内容，再次点击则收起。
        这是第二行。
        这是第三行。
        这是第四行，默认是隐藏的，点击展开后可见。
        这是第五行，同样默认是隐藏的。
    </p>
    <button class="toggle-btn">展开/收起</button>
</div>

2. 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;
}

3. 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动态计算行数并设置高度，或者使用第三方库。但那样会增加实现的复杂性。