有 span 标签 innerHTML 而不是换行符

Question

我想在 div 内使用带有项目 class 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

您在 .item-span 上寻找 white-space: nowrap:

#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>

有 span 标签 innerHTML 而不是换行符

have span tag innerHTML not line break

css

line

break

width