Prévenir la balise H1 de la rupture à la ligne

Je suis entrain de créer une page web dynamique à l'aide de la fondation. Tout transitions parfaitement pour les téléphones et les tablettes. Cependant, j'ai créer ce sur une résolution de 1920 x 1080 écran. Et quand je l'ai testé sur une résolution de 1280 x 1024 moniteur, mon H1 logo et h2 slogan cassé.

Je ne sais pas comment résoudre ce problème. Voici mon CSS et 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-->
Si javascript/jQuery est une option, prendre un coup d'oeil à cette question
J'ai donné une réponse ci-dessous qui fait exactement ce que vous voulez, mais je pense que vous voudrez peut-être chercher une autre solution à ce problème. À l'aide de @media de requêtes dans votre code CSS fichiers, vous pouvez afficher les deux divs ci-dessous les uns des autres ou de réduire la taille de la police sur les petits écrans.

OriginalL'auteur onTheInternet | 2014-02-21

  1. 19

    Si vous voulez éviter que votre h1 de le séparer en plusieurs lignes, vous pouvez utiliser l'instruction suivante:

    h1 { white-space: nowrap; }

    Cela ne fonctionne que dans les navigateurs qui supportent CSS3 et vous pouvez avoir à définir un overflow de propriété sur l'élément conteneur.

    Je ne pense que vous pourriez rechercher une autre solution à ce problème. Votre h1 est tout simplement trop grand pour votre en-tête sur les petits écrans.

    À l'aide de @media de requêtes dans votre code CSS fichiers, vous pouvez afficher les deux divs ci-dessous les uns des autres ou de réduire la taille de la police sur les petits écrans.

    Cela fonctionne bien, mais maintenant la question est que la balise h1 est trop grande et ne correspond pas à sa DIV.
    Très correct, donc j'ai déjà fait un commentaire sur la question elle-même. Je vais mettre à jour ma réponse un peu à réfléchir.

    OriginalL'auteur Marijke Luttekes

  2. 4

    Utiliser CSS:

    #logo h1 {
white-space: nowrap;
}

    ou changer votre titre du texte:

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

    &nbsp; est une entité HTML pour un "non-freinage de l'espace". J'ai tendance à l'utiliser car tous les navigateurs le supportent.

    OriginalL'auteur Kroltan

  3. 3

    Utilisation white-space:nowrap; d'arriver à ce que vous recherchez.

    Par Exemple,

    #logo h1 {
white-space: nowrap;
}

    OriginalL'auteur Nitesh