防止H1标签破坏到新线

Question

我正在使用基础创建一个动态网页.一切都完美无瑕地转换到手机和平板电脑.但是,我在1920 x 1080显示器上创建了它.当我在1280 x 1024显示器上测试时,我的H1徽标和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简直是太大了,在小屏幕上你的头.

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

Answer 2

这对我的 BootStrap 4 有用

<h2 style="display:inline">ABC</h2><h3 style="display:inline">abc</h3>

必须style="display:inline"位于两个相邻的 H 标签中才能正常工作。