have span tag innerHTML not line break

Question

I want to have the span tag inside the div with the item class innerHTML to not cause a line break no matter its length. I also do not want to have the innerHTML that goes beyond the item width to overlap but be hidden. I have tried using CSS display, overflow and I have had no luck with preventing any line break. I have had success with ensuring no text overlaps when it goes beyond the item width.

#list {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 200px;
  width: 200px;
}

.item {
  width: 100%;
}

.item-div {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
}

.item-span {
  overflow: hidden;
}

<div id="list">
  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item</span>
  </div>

  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
  </div>

  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item</span>
  </div>
</div>

Answer 1

You're looking for white-space: nowrap on .item-span:

#list {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 200px;
  width: 200px;
}

.item {
  width: 100%;
}

.item-div {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
}

.item-span {
  white-space: nowrap;
}

<div id="list">
  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item</span>
  </div>

  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
  </div>

  <div class="item">
    <div class="item-div">

    </div>
    <span class="item-span">Item</span>
  </div>
</div>