иметь тэг span innerHTML, не разрыв строки - PullRequest
Новая
       8

иметь тэг span innerHTML, не разрыв строки

0 голосов
/ 11 марта 2019

Я хочу иметь тег span внутри div с классом item innerHTML, чтобы не вызывать разрыв строки независимо от ее длины. Я также не хочу иметь 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>

1 Ответ

1 голос
/ 11 марта 2019

Вы ищете 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>
...