网页Marquee读取文本文件内容显示截断，如何解决？

使用Marquee组件从marqueetext.txt读取内容时，文本被截断，且无法通过修改CSS属性（包括在浏览器Elements面板调整）改变文本尺寸和显示区域长度。

相关代码 #

HTML代码

<p><object type="text/html" data="marqueetext.txt"></object></p>

CSS代码

.marquee {
 height: 50px;  
 overflow: hidden;
 position: relative;
 background: black;
 color: #E9BF73;
 font-family: Arial;
 font-size:medium ;
 border: 1px yellow;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation */  
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}

解决办法 #

1. 修正HTML结构，让CSS生效
   原HTML未给容器添加.marquee类，导致CSS样式完全没作用到目标元素。修改后的HTML：

   <div class="marquee">
     <object type="text/html" data="marqueetext.txt"></object>
   </div>
   

2. 解除<object>的尺寸限制
   <object>默认有内置尺寸约束，需添加样式让它适配容器并显示完整文本：

   .marquee object {
     width: 100%;
     height: 100%;
     overflow: visible;
     border: none; /* 移除默认边框 */
   }
   

3. 调整文本容器的宽度逻辑
   原CSS中.marquee p的width: 100%会强制文本被容器宽度截断，改成自适应文本长度：

   .marquee p {
     position: absolute;
     width: auto; /* 替换为auto，让宽度随文本内容变化 */
     white-space: nowrap; /* 强制文本不换行 */
     height: 100%;
     margin: 0;
     line-height: 50px;
     /* 保留原有动画、定位属性 */
   }
   

4. 规范文本文件内容格式
   确保marqueetext.txt里的内容被正确包裹，避免格式问题导致截断，示例内容：

   <p>你的完整滚动文本内容</p>
   

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