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 */  
}