css 展开 收起为一行

CSS是前端开发中不可缺少的一部分。在网站开发的过程中，我们会遇到需要将长内容进行收起和展开的情况。下面我们来看看如何实现一行展开和收起。

首先，在HTML中设置展开和收起所需显示的文字。

p>
        span class="view-more">
    展开/span>
        span class="view-less">
    收起/span>
    /p>

接着，在CSS中设置使展开和收起显示在同一行的样式。

p {
        overflow: hidden;
        position: relative;
}
.view-more,.view-less {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #f8f8f8;
        padding: 5px 10px;
        cursor: pointer;
}
.view-more:hover,.view-less:hover {
        background-color: #e6e6e6;
}
.view-less {
        display: none;
}
.expanded {
        height: auto;
}
    

最后，在Javascript中添加展开和收起的动作。

const viewMore = document.querySelector('.view-more');
    const viewLess = document.querySelector('.view-less');
    const p = viewMore.parentNode;
viewMore.addEventListener('click', function() {
        p.classList.add('expanded');
        viewLess.style.display = 'inline-block';
        viewMore.style.display = 'none';
}
    );
viewLess.addEventListener('click', function() {
        p.classList.remove('expanded');
        viewLess.style.display = 'none';
        viewMore.style.display = 'inline-block';
}
    );
    

以上就是用CSS实现一行展开和收起的方法，可以让网页看起来更加美观和整洁。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！