css - 浏览器窗口未处于最大模式时的换行符

Question

我正在尝试设计（响应式）一个将完美出现在每个设备中的网站。我正在使用蓝图 CSS 框架（转换为流体）我有以下代码用于简单标题。

HTML

<div class="prepend-3" style="margin-top:20px;">
   <h1>Stack <span style="color:#C6CBCE">Overflow</span></h1>
</div>

我的 CSS

h1 { 
   padding: 20px 0; margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; color: #222; 
   font-weight: normal; 
   line-height: 80px; }

我面临的问题是，当我运行将浏览器窗口保持在最大模式的代码时，我可以看到“堆栈”和“溢出”这两个词都在同一行，这是完美的，但是当我不最大化浏览器的窗口时，这条线像下面一样分解。

你能告诉我如何解决这个问题（让它响应）？

谢谢 ：）

Answer 1

尝试使用white-space: nowrap;属性

h1 { 
   padding: 20px 0; 
   margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; 
   color: #222; 
   font-weight: normal; 
   line-height: 80px;
   white-space: nowrap; <------Here
}

或者准确地说，您还可以使用 CSS3 @media 查询指定特定于屏幕尺寸的不同样式，但我希望您按照您指定的方式使用它Responsive

@media only screen and (max-device-width: 480px) {
 /* Styles Goes Here */  
}