javascript - 宽度改变功能后宽度不跨越整个 parent 的宽度

Question

在我的代码中，您会注意到函数运行完毕后，插入 div 的宽度确实完全跨越了其父容器的整个宽度，但仍保持初始宽度(我将其设为红色以清楚显示)。它不会影响代码的当前用途，因为文本恰好超过了它的宽度，但它最终会扰乱 future 的应用程序。我希望 inset div 的宽度跨越其父容器 (#fill) 的整个宽度，同时又不弄乱函数。我希望它是一个简单的修复？谢谢。

var inset = document.getElementById('inset')
var fill = document.getElementById('fill')
var text = 'There was a lamb who had a cow and a farmer was involved and then you make a moo sound and yell BINGO and that is how the song goes.';
var words = text.split(" ")

var i=0
var timer = 5;
var wordTime = (timer/words.length)*1000;
    

var myVar = setInterval(myFunct, wordTime);

function myFunct() {
    if (i == words.length) {
        clearInterval(myVar);
    }
    else {
        inset.innerHTML += " " + words[i];
    }
    i++
    let outer = fill
    outer.scrollLeft += outer.scrollWidth;
    }

#wrapper {
        position:absolute;
        display:flex;
        height:100px;
        width:100%;
        min-width:100%;
        max-width:100%;
        left:0;
        right:0;
        bottom:0;
        align-items: center;
        text-align:right;
        color:whitesmoke;
        font-family: sans-serif;
        font-size: 200%;
        background-color: rgba(0,0,0,0.7);
    }
       
    #fill {
        display:flex;
        width:100%; /*You can make this 100% to have text span across entire containing div */
        height:100%;
        max-width:100%;
        align-items: center;
        overflow:auto;  
    }
    
    #inset {
        white-space: nowrap;
        padding-left:5px;
        min-width: 100%;
        background-color:red;
    }

<div id='wrapper'>
        <div id ='fill'>
            <span id='inset'></span>
        </div>
    </div>

Answer 1

您可以删除一些无用的代码，如下所示，并添加 margin-left:auto; 到 span 元素:

var inset = document.getElementById('inset')
var fill = document.getElementById('fill')
var text = 'There was a lamb who had a cow and a farmer was involved and then you make a moo sound and yell BINGO and that is how the song goes.';
var words = text.split(" ")

var i = 0
var timer = 5;
var wordTime = (timer / words.length) * 1000;


var myVar = setInterval(myFunct, wordTime);

function myFunct() {
  if (i == words.length) {
    clearInterval(myVar);
  } else {
    inset.innerHTML += " " + words[i];
  }
  i++
  let outer = fill
  outer.scrollLeft += outer.scrollWidth;
}

#wrapper {
  position: absolute;
  display: flex;
  height: 100px;
  /*width: 100%;*/
  min-width: 100%;
  /*max-width: 100%;*/
  left: 0;
  right: 0;
  bottom: 0;
  /*align-items: center;*/
  /*text-align: right;*/
  color: whitesmoke;
  font-family: sans-serif;
  font-size: 200%;
  background-color: rgba(0, 0, 0, 0.7);
}

#fill {
  display: flex;
  /*width:100%*/
  min-width:100%;
  height: 100%;
  align-items: center;
  overflow: auto;
}

#inset {
  white-space: nowrap;
  /*min-width: 100%;*/
  padding-left: 5px;
  background-color: red;
  margin-left:auto; /* Added */
}

<div id='wrapper'>
  <div id='fill'>
    <span id='inset'></span>
  </div>
</div>