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

Я хочу, чтобы тег span внутри div с классом элемента 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>

white-space.

— 11.03.2019 21:45

css width line break

11.03.2019 21:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

139

Перейти к ответу Данный вопрос помечен как решенный

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

11.03.2019 21:48

Другие вопросы по теме

Выровненный по нижнему правому краю пробел

Привязка Wpf Width к свойству со звездочкой

Действительно запутался в flexbox flex-basis и ширине

Ширина раскрывающегося списка Bootstrap 4

Сохраняйте HTML5 Background-Video в полноэкранном режиме (на мобильных устройствах)

Полноэкранный режим в обработке

Перезапись ширины таблицы, объявленной в css, с атрибутом ширины html

Проверка поля изображения Django Form для определенной ширины и высоты

JQuery - ширина окна отслеживания не работает

Textview в tablelayout не может изменить ширину

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

Ответы 1

Другие вопросы по теме

Похожие вопросы