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

Question

在我的代码中，函数完成后您会注意到运行插图 div 的宽度确实完全跨越其 parent 容器的整个宽度，但保持初始状态宽度（我把它设为红色以清楚显示）。它不会影响代码的当前用途，因为文本恰好超过了它的宽度，但它最终会扰乱未来的应用程序。我希望插图 div 的宽度跨越其整个 parent 容器的 (#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

尝试将 white-space: nowrap; 给 parent，而不是 #inset

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;
  white-space: nowrap;
  direction:rtl;
}

#inset {
  padding-left: 5px;
  background-color: red;
}

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

Answer 2

您可以像下面这样删除一些无用的代码并添加 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>

Answer 3

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: fixed;
  /* Changed */
  overflow: scroll;
  /* Added */
  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 {
  position: absolute;
  /* Added */
  white-space: nowrap;
  padding-left: 5px;
  min-width: 100%;
  background-color: red;
}

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

如果定位不是问题，您可以尝试上面的解决方案。

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

Width not spanning entire parent's width after width altering function

html

javascript

css

overflow

width