在网页设计中，常常会遇到文本内容过多，需要进行适当处理以提升页面美观度和用户体验的情况。对于两行文本溢出后自动展开以及“展开收起”按钮切换功能的实现，CSS 可以发挥重要作用。

我们要设置基本的 CSS 样式来实现文本的两行显示并溢出隐藏。通过设置overflow: hidden;和text-overflow: ellipsis;，可以让文本在超出容器宽度时以省略号显示。使用display: -webkit-box;、-webkit-box-orient: vertical;和-webkit-line-clamp: 2;这些属性，能够将文本限制在两行显示。例如：

.element {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

接下来，实现“展开收起”按钮的关键在于利用 CSS 的max-height属性和 JavaScript 的事件绑定。我们先为展开状态设置一个较大的max-height值，让文本全部显示；而收起状态则设置较小的max-height值，配合溢出隐藏属性让文本只显示两行。

.element.expanded {
    max-height: 1000px; /* 足够大以显示全部文本 */
    text-overflow: clip;
}
.element.collapsed {
    max-height: 40px; /* 两行文本高度 */
    overflow: hidden;
    text-overflow: ellipsis;
}

然后，使用 JavaScript 来控制按钮的点击事件，切换元素的类名。例如：

const expandButton = document.querySelector('.expand-button');
const textElement = document.querySelector('.element');

expandButton.addEventListener('click', function() {
    if (textElement.classList.contains('collapsed')) {
        textElement.classList.remove('collapsed');
        textElement.classList.add('expanded');
        this.textContent = '收起';
    } else {
        textElement.classList.remove('expanded');
        textElement.classList.add('collapsed');
        this.textContent = '展开';
    }
});

通过上述 CSS 和 JavaScript 的配合，就能轻松实现两行文本溢出后自动展开以及“展开收起”按钮的切换功能。这种方法不仅提升了页面的可读性，也增强了用户与页面的交互性，为用户带来更好的浏览体验。无论是文章摘要展示，还是产品描述呈现，都能有效地展示关键信息，同时满足用户对详细内容的查看需求。