Question

在我的代码中，您会注意到函数完成运行后，插入div的宽度确实完全覆盖了其父容器的整个宽度，但保持了初始宽度（我将其设置为红色以清楚显示）。它不会影响代码的当前用途，因为文本会超出其宽度，但最终会与将来的应用程序混淆。我希望插入div的宽度跨过其父容器（#fill）的整个宽度，同时又不弄乱函数。我希望它是一个简单的解决方案？谢谢。

public static<A, B, C> Stream<C> zip(Stream<? extends A> a,
                                     Stream<? extends B> b,
                                     BiFunction<? super A, ? super B, ? extends C> zipper) {
    Objects.requireNonNull(zipper);
    Spliterator<? extends A> aSpliterator = Objects.requireNonNull(a).spliterator();
    Spliterator<? extends B> bSpliterator = Objects.requireNonNull(b).spliterator();

    // Zipping looses DISTINCT and SORTED characteristics
    int characteristics = aSpliterator.characteristics() & bSpliterator.characteristics() &
            ~(Spliterator.DISTINCT | Spliterator.SORTED);

    long zipSize = ((characteristics & Spliterator.SIZED) != 0)
            ? Math.min(aSpliterator.getExactSizeIfKnown(), bSpliterator.getExactSizeIfKnown())
            : -1;

    Iterator<A> aIterator = Spliterators.iterator(aSpliterator);
    Iterator<B> bIterator = Spliterators.iterator(bSpliterator);
    Iterator<C> cIterator = new Iterator<C>() {
        @Override
        public boolean hasNext() {
            return aIterator.hasNext() && bIterator.hasNext();
        }

        @Override
        public C next() {
            return zipper.apply(aIterator.next(), bIterator.next());
        }
    };

    Spliterator<C> split = Spliterators.spliterator(cIterator, zipSize, characteristics);
    return (a.isParallel() || b.isParallel())
           ? StreamSupport.stream(split, true)
           : StreamSupport.stream(split, false);
}

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;
    }

Answer 1

您可以删除一些像下面这样的无用代码，并添加margin-left:auto;以覆盖元素：

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 2

尝试将white-space: nowrap;交给父母，而不是#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 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>

如果定位不是问题，则可以尝试上述解决方案。

宽度更改功能后，宽度未覆盖整个父对象的宽度

3 个答案: