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对于小屏幕上的标题来说太大了。

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

Answer 2

使用CSS：

#logo h1 {
    white-space: nowrap;
}

或更改标题的文字：

<h1>VoIP&nbsp;Innovations</h1>

 是“非制动空间”的HTML实体。我倾向于使用它，因为所有浏览器都支持它。

Answer 3

使用white-space:nowrap;来实现您的目标。

对于实例，

#logo h1 {
   white-space: nowrap;
   }

Answer 4

这与BootStrap 4配合使用对我来说

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

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

Answer 5

您是否尝试过以下行？

h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}

它还可以避免标题在移动设备上中断。

防止H1标签破坏到新线

5 个答案: