顾名思义，内联块参与内联布局，这意味着它们的行为就像内联元素一样，text.white-space: nowrap通过阻止文本换行而导致文本在元素中溢出;内联块也是一样的。就这么简单。
#headline具有white-space: normal这一事实对其自身的布局没有影响。元素的white-space属性影响其内容的布局，而不是其自身的布局，即使该元素自身的框是内联级别的。

设置标题元素的宽度修复了这个问题。

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

如果图像 Package 器和图像都定义了它们的最大宽度，那么它就是响应的。

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/

需要在 Package 器元素中使用overflow: hidden;

#wrapper {
  background: #fea;
  white-space: nowrap;
  width: 50%;
  overflow: hidden;
}

我在jsfiddle http://jsfiddle.net/XjstZ/72/中更新了您的示例

此内容因white-space: normal;而换行。

white-spaceCSS属性决定如何处理元素中的空白。要使单词在它们自己内部断开，请使用overflow-wrap、word-break、或者连字符。现在，如果你想用#wrapper来限制它，那么你可以限制div的overflow属性。如果你用white-space: nowrap;来限制div，那么就会清除溢出文本，并在一行中显示div（世界其他地区）。

#wrapper {
    background: #fea;
    width: 50%;
    overflow: hidden;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;

}