从文本文件填充HTML marquee跑马灯出现大量空白问题求助

问题原因 #

你使用<object>标签加载文本的方式不符合<marquee>的内容识别逻辑：<object>属于嵌入式标签，会作为独立的块级元素存在，自带默认宽高，<marquee>无法读取其内部的实际文本长度，因此会出现大量空白、滚动长度异常的问题。

解决方案 #

直接用极简原生JS实现即可，完全符合你「非技术人员仅修改txt文件、重新发布就生效」的需求，没有额外复杂操作：

1. 将你原有跑马灯的代码替换为下方代码，复制粘贴即可使用：

<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
    <div class="w3-container ocacity75">
        <div class="w3-card-4 w3-white w3-round ticker">    
            <marquee id="tickerContent"></marquee>
        </div>
    </div>
</div>
<script>
fetch('./TickerText.txt')
  .then(res => res.text())
  .then(text => {
    // 自动清除文本前后多余的换行、空格
    document.getElementById('tickerContent').innerText = text.trim()
  })
</script>

2. 如果你的BrightSign设备系统版本较旧，不支持fetch语法，可以将上述代码的<script>部分替换为兼容版本：

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', './TickerText.txt', true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById('tickerContent').innerText = xhr.responseText.trim();
  }
};
xhr.send();
</script>

使用说明 #

后续更新跑马灯内容时，仅需编辑同目录下的TickerText.txt，保存后重新发布到显示系统即可生效，无需修改任何代码文件。

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