Блог

Главная - Вопросы по программированию - иметь тег span innerHTML без разрыва строки

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

#css #width #line #break

#css #ширина #строка #разрыв

Вопрос:

Я хочу иметь тег span внутри div с классом элемента innerHTML, чтобы не вызывать разрыв строки, независимо от его длины. Я также не хочу, чтобы innerHTML, который выходит за пределы ширины элемента, перекрывался, но был скрыт. Я пробовал использовать CSS display, overflow, и мне не повезло с предотвращением любого разрыва строки. Я добился успеха в обеспечении отсутствия перекрытий текста, когда он выходит за пределы ширины элемента. 

 #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. white-space .

Ответ №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>