Bootstrap模板中Read More功能文本异常换行不连续问题排查

• 核心原因是展开隐藏文本时，#more5元素的display属性被设置为block，块级元素默认独占一行，就会导致展开内容在省略号位置单独换行，无法和前面的文本保持连贯的行内排版。哪怕你代码中写了设置为inline，也可能存在自定义CSS、Bootstrap默认样式优先级更高，覆盖了行内样式的情况。
• 潜在逻辑隐患：全局变量i、函数名solar和按钮IDsolar重名，部分浏览器会把DOM元素ID注册为全局变量，容易引发逻辑异常。

快速修复（直接调整JS逻辑） #

删除全局变量i，直接判断元素显示状态，同时强制设置行内显示，避免样式覆盖：

function solar() {
  const moreText = document.getElementById("more5");
  const dots = document.getElementById("dots5");
  const toggleBtn = document.getElementById("solar");

  if (moreText.style.display === "none") {
    moreText.style.display = "inline";
    dots.style.display = "none";
    toggleBtn.innerHTML = "Read Less";
  } else {
    moreText.style.display = "none";
    dots.style.display = "inline";
    toggleBtn.innerHTML = "Read More";
  }
}

稳妥优化（用类名控制样式，避免优先级冲突） #

1. 先新增自定义CSS规则，优先级高于默认样式：

/* 隐藏状态 */
#more5.hidden {
  display: none !important;
}
/* 显示状态保持行内 */
#more5.show {
  display: inline !important;
}

2. 修改HTML初始结构：

<span id="more5" class="hidden" style="display: none;">something that has been bothering you with your devices, cameras, phones, alarms, solar panels? Do you need advice? Contact Us! IT'S FREE!!!</span>

3. 调整JS为切换类名即可：

function solar() {
  const moreText = document.getElementById("more5");
  const dots = document.getElementById("dots5");
  const toggleBtn = document.getElementById("solar");

  if (moreText.classList.contains("hidden")) {
    moreText.classList.replace("hidden", "show");
    dots.style.display = "none";
    toggleBtn.innerHTML = "Read Less";
  } else {
    moreText.classList.replace("show", "hidden");
    dots.style.display = "inline";
    toggleBtn.innerHTML = "Read More";
  }
}

额外排版优化 #

调整文本间的空格位置，避免展开后出现缺空格、多空格的问题：

<p>
  Do you need something that isn't on the website? Do you need to consult someone on <span id="dots5">...</span><span id="more5" class="hidden">something that has been bothering you with your devices, cameras, phones, alarms, solar panels? Do you need advice? Contact Us! IT'S FREE!!!</span>
</p>

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