如何让自定义HTML滚动文本元素实现单行循环滚动？

要解决长文本换行滚动的问题，只需在现有CSS中添加/调整以下关键样式：

核心修改点 #

• 给滚动文本元素(#scroll-text)添加white-space: nowrap;，强制文本保持单行不换行
• 给容器(#scroll-container)明确设置overflow-x: hidden;，确保横向溢出内容被隐藏（原overflow: hidden也可保留，补充overflow-x更直观）

修改后的完整代码 #

my-scrolling-text-v3.js #

class MyScrollingTextV3CustomElement extends HTMLElement {
  attrObj = {
    color: '#000',
    text: '请在自定义元素中设置"text"属性'
  };
  attrs = ['color', 'text'];

  constructor() {
    super();
    console.log("myScrollingText.constructor()");
    // 构造函数中无法获取属性
  }

  connectedCallback() {
    try {
      console.log("myScrollingText.connectedCallback()");
      this.setAttributes();
      console.log("myScrollingText.connectedCallback(): attrObj=" + JSON.stringify(this.attrObj));
      this.appendChild(this.createStyle(this.attrObj.color));
      this.appendChild(this.createScrollingTextInsideTextContainer(this.attrObj.text));
    } catch (error) {
      console.log("myScrollingText.connectedCallback(): catch: " + error);
    }
  }

  setAttributes() {
    let value = "";
    for (let attr of this.attrs) {
      console.log("setAttributes(): attr=" + attr);
      try {
        value = this.getAttribute(attr);
        console.log("setAttributes(): value=" + value);
        if (this.attrObj.hasOwnProperty(attr) && value && (value !== '')) {
          this.attrObj[attr] = value;
        }
      } catch (error) {
        // 忽略错误，使用默认值
      }
    }
  }

  createStyle(color) {
    const styleElement = document.createElement('style');
    styleElement.innerHTML = `
                #scroll-container {
                    border: 3px solid black;
                    border-radius: 5px;
                    overflow: hidden;
                    overflow-x: hidden; /* 明确横向溢出隐藏 */
                }
                #scroll-text {
                    font-size: 34px;
                    color: ${color};
                    white-space: nowrap; /* 强制单行不换行 */
                    /* 动画属性 */
                    -moz-transform: translateX(100%);
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%);
                    -moz-animation: my-animation 15s linear infinite;
                    -webkit-animation: my-animation 15s linear infinite;
                    animation: my-animation 15s linear infinite;
                }
                /* Firefox 兼容 */
                @-moz-keyframes my-animation {
                    from { -moz-transform: translateX(100%); }
                    to { -moz-transform: translateX(-100%); }
                }
                /* Chrome 兼容 */
                @-webkit-keyframes my-animation {
                    from { -webkit-transform: translateX(100%); }
                    to { -webkit-transform: translateX(-100%); }
                }
                @keyframes my-animation {
                    from {
                        -moz-transform: translateX(100%);
                        -webkit-transform: translateX(100%);
                        transform: translateX(100%);
                    }
                    to {
                        -moz-transform: translateX(-100%);
                        -webkit-transform: translateX(-100%);
                        transform: translateX(-100%);
                    }
                }
            `;
    return styleElement;
  }

  createScrollingTextInsideTextContainer(text) {
    const textContainerDiv = document.createElement('div');
    textContainerDiv.id = 'scroll-container';
    textContainerDiv.appendChild(this.createScrollingText(text));
    return textContainerDiv;
  }

  createScrollingText(text) {
    const textDiv = document.createElement('div');
    textDiv.id = 'scroll-text';
    textDiv.textContent = text;
    return textDiv;
  }

}

customElements.define('my-scrolling-text-v3', MyScrollingTextV3CustomElement);

HTML使用示例 #

<my-scrolling-text-v3 color="#0f0" text="这是一段超长的测试文本，用来验证单行滚动效果，确保文本不会换行而是持续从右向左滚动展示全部内容"></my-scrolling-text-v3>

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