有span标记innerHTML而不是换行符

Question

我希望在div中使用项类innerHTML来设置span标记，不管它的长度如何都不会导致换行。我也不希望将innerHTML超出项目宽度重叠但是要隐藏。我试过使用CSS显示，溢出，我没有运气防止任何换行。我已成功确保超出项目宽度时没有文本重叠。

#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

您正在寻找white-space: nowrap上的.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>