Verhindern H1-tag aus brechen Sie auf neue Zeile

Ich bin erstellen einer dynamischen web-Seite mit foundation. Alles übergänge einwandfrei auf Smartphones und tablets. Allerdings habe ich die Erstellung dieser auf einem 1920 x 1080 monitor. Und wenn ich es getestet auf einem 1280 x 1024 monitor, meine H1-logo-und h2-Slogan zerbrach.

Im nicht sicher, wie dieses Problem zu beheben. Hier ist mein CSS und 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-->
Wenn javascript/jQuery ist eine option, werfen Sie einen Blick auf diese Frage
Ich habe da eine Antwort unten, die genau das macht, was Sie wollen, aber ich denke, möchten Sie vielleicht zu suchen, eine andere Lösung für dieses Problem. Mit @media queries in den CSS-Dateien, Sie können entweder die zwei divs unter einander oder verringern Sie die Schriftgröße auf kleineren Bildschirmen.

InformationsquelleAutor onTheInternet | 2014-02-21

  1. 19

    Wenn Sie verhindern möchten, dass Ihre h1 zu brechen in mehrere Zeilen, können Sie die folgende Anweisung verwenden:

    h1 { white-space: nowrap; }

    Dies funktioniert nur in Browsern, die CSS3-Unterstützung und Sie haben um eine overflow - Eigenschaft auf das element enthalten.

    Ich denke, möchten Sie vielleicht zu suchen, eine andere Lösung für dieses Problem. Ihre h1 ist einfach zu groß für Ihren Kopf-auf kleinen Bildschirmen.

    Mit @media queries in den CSS-Dateien, Sie können entweder die zwei divs untereinander, oder verringern Sie die Schriftgröße auf kleineren Bildschirmen.

    Dies funktioniert gut, aber jetzt das Problem, dass der h1-tag ist zu groß und passt nicht mehr in seine DIV.
    Sehr richtig, daher habe ich bereits einen Kommentar auf die Frage selbst. Ich werde aktualisieren, meine Antwort ein bisschen zu reflektieren.

    InformationsquelleAutor Marijke Luttekes

  2. 4

    Entweder Verwendung von CSS:

    #logo h1 {
    white-space: nowrap;
}

    oder ändern Sie Ihren Titel text:

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

    &nbsp; ist eine HTML-Entität für eine "non-braking-space". Ich würde geneigt sein, es zu benutzen, da alle Browser unterstützen es.

    InformationsquelleAutor Kroltan

  3. 3

    Verwenden white-space:nowrap; zu erreichen, was Sie suchen.

    Zum Beispiel,

    #logo h1 {
   white-space: nowrap;
   }

    InformationsquelleAutor Nitesh

Schreibe einen Kommentar