Пробелы Nowrap CSS для детей, но не родителей

Question

У меня есть div с несколькими пролетами внутри.Пролеты содержат текст, который не может быть разбит на несколько строк, поэтому я установил пробел: nowrap.Это действительно останавливает перенос внутри каждого дочернего промежутка, но также мешает родительскому div обернуть дочерние элементы, чтобы все промежутки находились на одной строке, растягивающейся на странице.

Как изменить это поведение, чтобы сделать только сейчасотносится к содержанию каждого диапазона?

Answer 1

Вариант 1

<style>
   .nowrap { white-space: nowrap; }
</style>

<div>
   <span class="nowrap">span 1</span>
   <span class="nowrap">span 2</span>
   <span class="nowrap">span 3</span>
   <span class="nowrap">span 4</span>
   <span class="nowrap">span 5</span>
</div>

Вариант 2

<style>
   .myDiv span{ white-space: nowrap; }
</style>

<div class="myDiv">
   <span>span 1</span>
   <span>span 2</span>
   <span>span 3</span>
   <span>span 4</span>
   <span>span 5</span>
</div>

Answer 2

div#id-of-parent span {
    whitespace: nowrap;
}

Это должно сработать. (вашему div нужно иметь атрибут id).

Answer 3

Установите для элементов span значение display:inline-block.

.