防止H1标签换行

Question

我正在使用Foundation创建一个动态网页。一切都可以顺利地过渡到手机和平板电脑上。然而，我是在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-->

- onTheInternet

---

如果JavaScript/jQuery是一个选项，请查看此问题：https://dev59.com/8m025IYBdhLWcg3wRDq8 - Michel

我在下面给出了一个完全符合您要求的答案，但是我认为您可能想寻找另一种解决方案来解决这个问题。在CSS文件中使用@media查询，您可以将两个div放置在彼此下方或在较小的屏幕上减小字体大小。 - Marijke Luttekes

Answer 1

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

h1 { white-space: nowrap; }

只有支持CSS3的浏览器才能使用此方法，并且您可能需要在包含元素上设置 overflow 属性。

我认为您可能需要寻找其他解决方案来解决此问题。在小屏幕上，您的 h1 太大了。

通过在CSS文件中使用 @media 查询，您可以将下面的两个 div 显示为堆叠，或者在较小的屏幕上减小字体大小。

- Marijke Luttekes

---

这个功能很好，但现在的问题是h1标签太大了，无法适应其DIV。 - onTheInternet

@onTheInternet 很正确，因此我已经在问题本身上发表了评论。稍后我会更新我的答案以反映这一点。 - Marijke Luttekes

Answer 2

使用这种方式适用于我的BootStrap 4

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

style="display:inline" 必须在相邻的 H 标签中都出现才能生效。

- user10971548

Answer 3

您可以使用CSS：

#logo h1 {
    white-space: nowrap;
}

或者更改您标题的文本：

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

 是HTML实体，表示“不间断空格”。由于所有浏览器都支持，我倾向使用它。

- Kroltan

---

这个空间刹车谁都拦不住！:) - undefined

Answer 4

使用white-space:nowrap;可以实现您所需的效果。

例如：

#logo h1 {
   white-space: nowrap;
   }

- Nitesh

Answer 5

之前

 <div style={{display: "inline"}}>
            <div style={{display: "inline"}}>
    
                <Headers/> ===><h6 >Questions and Answer</h6>
            </div>
            <div style={{display: "inline"}}>
    
                <Searches/>
            </div>
            <div style={{display: "inline"}}>
    
                <LInks/>
            </div>
        </div>

解决方案后

<h6  style="display:inline">Questions and Answer</h6>

- lava

Answer 6

你尝试过以下这行代码吗？

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

这也可以避免标题在移动设备上换行。

- Gabriel A Romero