移动端使用JavaScript限制字符数出错，求问题排查指导

DevOps 小满

2026-8-19

移动端文本字符限制代码问题修复

你的代码存在以下核心问题：

函数调用错误：cartersLimit === true是布尔值比较操作，不是执行函数，正确调用方式应为cartersLimit()
未处理窗口尺寸变化：仅在页面加载时判断一次屏幕宽度，用户调整窗口大小（如手机旋转）时不会重新触发文本限制逻辑
丢失原始文本：直接修改innerText会覆盖原始内容，当屏幕从移动端切回桌面端时，无法恢复完整文本
选择器使用不当：querySelectorAll('#descricao-script')中id是页面唯一标识，若需作用于多个元素应改用class选择器（如.descricao-script），单个元素则用querySelector即可

修复后的代码示例：

<script>
  // 存储需要处理的元素，改用class选择器适配多个元素
  const descricaoElements = document.querySelectorAll('.descricao-script');
  const LIMIT = 135;
  // 提前保存每个元素的原始文本，避免修改后丢失
  const originalTexts = Array.from(descricaoElements).map(el => el.innerText);

  function handleTextLimit() {
    const isMobile = document.body.clientWidth < 440;
    descricaoElements.forEach((el, index) => {
      if (isMobile) {
        const aboveLimit = originalTexts[index].length > LIMIT;
        const dotOrEmpty = aboveLimit ? '...' : '';
        el.innerText = originalTexts[index].substring(0, LIMIT) + dotOrEmpty;
      } else {
        // 桌面端恢复原始完整文本
        el.innerText = originalTexts[index];
      }
    });
  }

  // 页面加载时执行一次
  handleTextLimit();
  // 监听窗口大小变化，实时调整文本显示
  window.addEventListener('resize', handleTextLimit);
</script>