html - 防止 H1 标签换行

Question

我正在使用基础创建一个动态网页。一切都完美地过渡到手机和平板电脑。但是，我是在 1920 x 1080 显示器上创建的。当我在 1280 x 1024 显示器上测试它时，我的 H1 Logo 和 h2 标语坏了。

我不确定如何解决这个问题。这是我的 CSS 和 HTML。

    /*Header*/

#Header{
     max-height:106px;
     min-height:105px;
     background-color:#666666;
     border-bottom-width:3px;
     border-bottom-style:solid;
     border-bottom-color:white;


}

#logo{

    max-height:106px;

    border-right-width:3px;
    border-right-style:solid;
    border-right-color:white;
    line-height:none;
    text-align:center;
    background-color:#f58026;
}

#logo h1{
    margin-top:10px;
    font-weight:400;
    font-family:'Gill Sans MT';
    font-size:2em;
    margin-bottom:0px;
}

#logo h2{

    margin-top:0px;
    font-weight:500;
    font-family:'Myriad Pro' ,Arial;
    font-style:italic;
    color:white;
    font-size:1em;
    padding-bottom:15px;
}

<div class="row collapse" id="voipHeader">

    <!--Logo-->
    <div id="logo" class="large-2 columns small-12 columns">
        <h1></h1>

        <h2>Your Premier </h2>
    </div>

      <!--Navigation-->
    <div id="navigation" class="large-10 columns small-12 columns">
        <ul>
            <li><a href="#">Clients</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Inquiry Form</a></li>
        </ul>

    </div>
</div><!--End Row-->

Answer 1

如果你想防止你的h1分成多行，你可以使用下面的语句:

h1 { white-space: nowrap; }

这只适用于支持 CSS3 的浏览器，您可能必须在包含元素上设置 overflow 属性。

我确实认为您可能想寻找其他解决方案来解决此问题。您的 h1 对于小屏幕上的标题来说太大了。

在您的 CSS 文件中使用 @media 查询，您可以将两个 div 显示在彼此下方，或者在较小的屏幕上减小字体大小。