不同块中的标题文本无响应

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

我并不完全确定我完全理解您的目标，但在display: inline-block;课程中添加.text会使其更接近您的目标。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对<span>文字使用.text { background-color: red; padding:5px; word-wrap:break-word; }。

它甚至适用于IE6，这是一个令人愉快的惊喜。

＆＃13;

＆＃13;

<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>

＆＃13;

$(document).foundation()

＆＃13;

＆＃13;

＆＃13;

Answer 3

{{1}}