текст заголовка в разных блоках не реагирует

Question

На устройствах с меньшим экраном следующее отображается в трех блоках, а не в одной строке предложения (см. Изображение).Итак, я хочу на небольших устройствах: «Здесь мы начинаем if-Statement-Text-1, и это конец».Как исправить?

Мне нужно, чтобы это выглядело так на маленьких экранах ...

.text {
  background-color: red;
  padding:20px;
  }

<div class="header">Here we start
		<span class="text">if-statement-text-1</span>
		<span class="text">if-statement-text-2</span>and  this is the end!</div>

Answer 1

.text {
white-space: nowrap;
}

Answer 2

Я не совсем уверен, что точно понимаю, к чему вы стремитесь, но добавление display: inline-block; к вашему .text классу должно приблизить его к вашей цели.

.text {
  background-color: red;
  padding:20px;
  display: inline-block;
  }

<div class="header">Here we start
		<span class="text">if-statement-text-1</span>
		<span class="text">if-statement-text-2</span>and  this is the end!</div>

Answer 3

Используйте word-wrap:break-word; для текста <span>.

Это работает даже в IE6, что является приятным сюрпризом.

.text {
  background-color: red;
  padding:5px;
  word-wrap:break-word;
  }

<div class="header">Here we start
   <span class="text">if-statement-text-1</span>
   <span class="text">if-statement-text-2</span> and  this is the end! 
</div>