WordPress中Div容器移动端内容溢出异常问题求助

我在WordPress页面手动创建报价容器，用来展示商品完整描述和价格，写了自定义脚本：当文本长度超出限制时显示“展开更多”按钮，点击可展开/收起内容。但切换到移动端视图时，明明设置了overflow:hidden，容器内容仍溢出边界。普通HTML文件里逻辑正常，仅在WordPress Elementor编辑器中出现此问题。

相关代码 #

JavaScript #

/* 检测是否需要显示展开按钮 */
window.addEventListener('DOMContentLoaded', countLines, false);

function countLines() {
    var offers = document.getElementsByClassName('offer-text');

    for (var i = 0; i < offers.length; i++) {
        displayOrNotButton(i);
    }

    function displayOrNotButton(i) {
        var showMoreContainer = document.getElementsByClassName('show-more-container')[i];

        if (offers[i].offsetHeight < offers[i].scrollHeight) {
            // 文本溢出，保留展开按钮
            return;
        } else {
            // 无溢出，隐藏按钮
            showMoreContainer.style.display = "none";
        }
    }
}

/* 展开/收起逻辑 */
document.addEventListener("DOMContentLoaded", function () {
    var showMoreContainers = document.getElementsByClassName("show-more-container");
    var offerContainers = document.getElementsByClassName("offer-container");
    var checkboxes = [];

    for (var i = 0; i < showMoreContainers.length; i++) {
        (function (i) {
            checkboxes[i] = showMoreContainers[i].getElementsByTagName("input")[0];
            checkboxes[i].addEventListener('change', e => {
                showOrHideText(e.target.checked, i);
            })
        })(i);
    }

    function showOrHideText(checked, i) {
        if (checked) {
            offerContainers[i].style["max-height"] = "none";
        } else {
            offerContainers[i].style["max-height"] = "450px";
        }
    }
})

CSS #

:root {
  font-family: Arial, Helvetica, sans-serif;
}

#all-offers-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 5em;
}

.offer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  max-height: 450px;
  padding: 2em 2em 100px 2em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
}

.offer-text {
  margin: 10px;
  height: auto;
  overflow: hidden;
}

.offer-price-tag {
  position: absolute;
  left: 0px;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

/* 展开更多按钮样式 */
.show-more-container {
  position: absolute;
  bottom: 4.5em;
  display: flex;
  text-align: center;
}

#all-offers-section label {
  position: relative;
  font-weight: bold;
  font-size: 1.125em;
  margin-top: 10px;
  text-decoration: underline;
}

div.show-more-container > input {
  display: none;
}

label:after {
  content: "Show more";
}

input[type="checkbox"]:checked + label:after {
  content: "Show less";
}

@media screen and (max-width: 640px) {
  #all-offers-section {
    grid-template-columns: 1fr;
  }
}

HTML #

<div id="all-offers-section">
    <div class="offer-container">
        <h2 class="offer-title">
            BRONZE
        </h2>
        <hr>
        <div class="offer-text">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus velit libero, sit amet
                porttitor turpis gravida ut. Integer tempus auctor imperdiet. Sed varius sit amet purus sed luctus.
                Maecenas scelerisque magna felis, vel ultrices enim sagittis eu.
            </p>
        </div>
        <div class="show-more-container">
            <input id="ch-1" type="checkbox">
            <label id=label-show-1 for="ch-1"></label>
        </div>
        <div>
            <span class="offer-price-tag">
                100
            </span>
        </div>
    </div>
    <div class="offer-container">
        <h2 class="offer-title">
            VIP
        </h2>
        <hr>
        <div class="offer-text">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus velit libero, sit amet
                porttitor turpis gravida ut. Integer tempus auctor imperdiet. Sed varius sit amet purus sed luctus.
                Maecenas scelerisque magna felis, vel ultrices enim sagittis eu. Phasellus at sapien sit amet diam
                pulvinar ornare quis tempus ex. Phasellus cursus eros ac urna blandit, ac tincidunt mi bibendum.
                Aliquam tempus ligula eu orci lacinia, quis feugiat purus luctus. Aenean eu ex dolor. Aliquam
                bibendum eu lectus in placerat. Nulla commodo fermentum felis ac pharetra. Aliquam ut ligula eu urna
                lacinia lacinia sed vitae elit. Mauris sed dui et turpis hendrerit maximus a in diam.

                Fusce eget finibus velit. Nunc condimentum sed mauris sed ultrices. Maecenas ut facilisis erat.
                Donec quis malesuada lacus. Sed iaculis dui vestibulum porta pretium. Cras tincidunt justo vel
                tellus ornare, non aliquam dolor rutrum. Suspendisse interdum neque arcu, sit amet mattis urna
                tincidunt vel. Integer fringilla nec tellus in scelerisque. Nulla placerat facilisis felis, non
                posuere lorem ultrices eu. Quisque accumsan fermentum purus vel aliquam. Fusce id libero vitae dui
                pretium posuere euismod vel odio.
            </p>
        </div>
        <div class="show-more-container">
            <input id="ch-3" type="checkbox">
            <label id=label-show-3 for="ch-3"></label>
        </div>
        <div>
            <span class="offer-price-tag">
                500
            </span>
        </div>
    </div>
</div>

解决方案 #

1. 修复容器溢出 #

Elementor可能继承全局样式或添加额外样式，导致overflow:hidden失效。给.offer-container添加overflow:hidden，同时调整移动端宽度适配：

.offer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
  max-height: 450px;
  padding: 2em 2em 100px 2em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden; /* 新增 */
}

2. 控制文本容器高度 #

.offer-text未限制高度，会撑破父容器。添加flex-grow:1和max-height，让文本在父容器范围内溢出隐藏：

.offer-text {
  margin: 10px;
  height: auto;
  max-height: calc(450px - 180px); /* 减去标题、价格栏等固定高度，按需调整 */
  overflow: hidden;
  flex-grow: 1; /* 让文本容器占满剩余空间 */
}

3. 适配窗口 resize #

移动端窗口变化时，重新检测文本溢出状态，添加resize监听：

// 原代码外新增
window.addEventListener('resize', countLines);

4. 避免样式冲突 #

使用更高优先级选择器，或者把自定义样式放到Elementor的自定义CSS区域：

#all-offers-section .offer-container {
  /* 样式内容 */
}

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