文本展开收起功能异常：See more无法切换为See less问题求助

算力阿峰

2026-7-9

问题描述

我给一段长段落末尾加了「See more」文本，想要点击它时展开整个段落，同时把「See more」换成「See less」并显示在段落末尾。但实际点击后，「See more」没切换成「See less」，位置也固定不动。

当前文本位置
 预期文本位置

现有CSS代码

/*Lower Side*/
.lowerside{
    margin-top: 38.3%;
    width: 100%;
    box-sizing: border-box;
    background-color: #F0F2F5;
    min-height: 200vh;
    position: relative;
}

/*Left Side*/
.lowerside-left{
    width: 360px;
    top: 5%;
    margin-left: 17%;
    margin-bottom: 0.5%;
    margin-top: -6%;
    border-radius: 8px;
    display: block;
    background-color: white;
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
    position: absolute;
}

/*Left Side Text*/
.lowerside-left-text{
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    padding: 10px 16px 4px;
    position: relative;
}

/*Left Side Icon*/
.lowerside-left-icon{
    padding: 5px 16px 4px;
    position: relative;
    border: none;
    border-radius: 0;
}

/*Hide Extra long text*/
.text-preview{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

/*Height after full text*/
.lowerside-left-fulltext{
    height: 410px;
}

/*See More*/
.seemore{
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    overflow: visible;
    position: absolute;
}

.seemore:hover{
    cursor: pointer;
    text-decoration: underline;
}

/*See Less*/
.seeless{
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    position: absolute;
}

.seeless:hover{
    cursor: pointer;
    text-decoration: underline;
}

/*Right Side*/
.lowerside-right{
    width: 480px;
    top: 5%;
    margin-left: 47%;
    margin-bottom: 0.5%;
    margin-top: -6%;
    border-radius: 8px;
    display: block;
    background-color: white;
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
    position: absolute;
}

现有HTML代码

<!--Lower Side-->
<div class="lowerside">

    <!--Left Side-->
    <div class="lowerside-left" id="about-section">
        <!--Left Side Text-->
        <h3 class="lowerside-left-text" style="font-weight: bolder;">About</h3>
        <p class="lowerside-left-text" style="color:#216fdb; font-size: small; font-weight:light; padding-left: 85%; margin-top: -14%;cursor: pointer;">See all</p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="I icon.png">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">The Facebook app Page celebrates how our friends inspire us, support us, and help us discover the world when we connect.</p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="I icon.png">
        <p class="lowerside-left-text text-preview" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">Community Values<br>
            We believe people can do more together than alone and that each of us plays an important role in helping to create a safe and respectful community. So, we’ve laid out a set of principles for us to follow on this Page:<br><br>
            Let’s celebrate the things that bring us together.<br><br>
            Let’s choose to treat each other like neighbors rather than strangers.<br><br>
            Let’s respect individuality and welcome diverse backgrounds and perspectives.<br><br>
            Let’s assume people mean well.<br><br>
            Our moderators are here for the community to uphold these values every day.</p>
            <!--See More-->
            <span class="seemore" onclick="toggleOverflow()" style="left: 13%; bottom: 43%;">See more</span>
            <script>
            function toggleOverflow() {
                var paragraph = document.querySelector('.lowerside-left-text.text-preview');
                var seeMore = document.querySelector('.seemore');
                var seeLess = document.querySelector('.seeless');

                if (paragraph.classList.contains('lowerside-left-fulltext')) {
                    // If the text is in full view, clicking "See more" should show truncated text
                    paragraph.classList.remove('lowerside-left-fulltext');
                    seeMore.textContent = 'See more';
                } else {
                    // If the text is truncated, clicking "See more" should show the full text
                    paragraph.classList.add('lowerside-left-fulltext');
                    seeMore.textContent = 'See less';
                }
            }
            </script>
            <span class="seeless" onclick="toggleOverflow()" style="display: none; left: 13%; bottom: 43%;">See less</span><!--See Less-->
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="black_like.png" style="bottom: -13px;">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -7%;">183,205,742 people like this</p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="follow.png" style="margin-top: -6px;">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">188,661,607 people follow this</p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="check.png" style="margin-top: -6px;">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">118 people checked in here</p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" src="World.png" style="margin-top: -6px;">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;"><a href="Link" style="color: #216fdb; text-decoration: none;">Link</a></p>
        <!--Left Side Icon and Text-->
        <img class="lowerside-left-icon" style="margin-top: -6px; margin-left: 15px; background-image: url(file.png); background-repeat: no-repeat; background-position: 0px -300px; filter: contrast(0); height: 20px; width: 20px;">
        <p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -9%;"><a href="https://www.facebook.com/pages/category/internet-company" style="color: #216fdb; text-decoration: none;">Internet Company</a></p>

    </div>

修复方案

1. 核心问题分析

用了两个独立的span分别承载「See more」和「See less」，但JS只修改了其中一个的文本，没处理显示隐藏逻辑，导致切换混乱
切换按钮用了绝对定位，固定了位置，无法跟随段落末尾移动
用固定高度的类控制文本展开，不够灵活，且和文本截断逻辑冲突

2. 具体修改步骤

（1）调整HTML结构：合并切换按钮到段落内部

把切换按钮放到目标段落里，避免绝对定位，让它自然跟随文本末尾：

<!-- 修改后的段落部分 -->
<img class="lowerside-left-icon" src="I icon.png">
<p class="lowerside-left-text text-preview" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">
  Community Values<br>
  We believe people can do more together than alone and that each of us plays an important role in helping to create a safe and respectful community. So, we’ve laid out a set of principles for us to follow on this Page:<br><br>
  Let’s celebrate the things that bring us together.<br><br>
  Let’s choose to treat each other like neighbors rather than strangers.<br><br>
  Let’s respect individuality and welcome diverse backgrounds and perspectives.<br><br>
  Let’s assume people mean well.<br><br>
  Our moderators are here for the community to uphold these values every day.
  <!-- 合并成单个切换元素 -->
  <span class="toggle-text" onclick="toggleOverflow()">See more</span>
</p>

同时删掉原来的.seemore和.seeless两个span。

（2）优化CSS：移除绝对定位，简化样式

删掉.seemore、.seeless、.lowerside-left-fulltext类，新增切换按钮的样式：

/* 保留原文本截断样式 */
.text-preview{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* 新增切换按钮样式 */
.toggle-text{
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #216fdb;
  cursor: pointer;
  display: block;
  margin-top: 8px;
}

.toggle-text:hover{
  text-decoration: underline;
}

（3）简化JS逻辑：只操作单个元素和类

function toggleOverflow() {
  const paragraph = document.querySelector('.lowerside-left-text.text-preview');
  const toggleBtn = document.querySelector('.toggle-text');
  
  if (paragraph.classList.contains('text-preview')) {
    // 移除截断类，显示完整文本
    paragraph.classList.remove('text-preview');
    toggleBtn.textContent = 'See less';
  } else {
    // 添加截断类，回到缩略状态
    paragraph.classList.add('text-preview');
    toggleBtn.textContent = 'See more';
  }
}

3. 效果说明

修改后点击「See more」会展开完整段落，按钮文本自动切换为「See less」并跟随在段落末尾；点击「See less」则收起文本，按钮切回「See more」，完全符合预期效果。

内容的提问来源于stack exchange，提问作者user22642436

文本展开收起功能异常：See more无法切换为See less问题求助

现有CSS代码 #

现有HTML代码 #

1. 核心问题分析 #

2. 具体修改步骤 #