WhiteSpace NOWRAP CSS для детей, но не родитель

Question

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

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

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.