Prevent H1 tag from breaking to new line

Question

I am creating a dynamic web page using foundation. Everything transitions flawlessly to phones and tablets. However, I have creating this on a 1920 x 1080 monitor. And when I tested it on a 1280 x 1024 monitor, my H1 logo and h2 tagline broke.

Im not sure how to fix this. Here is my CSS and 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-->

If javascript/jQuery is an option, take a look at [this question](http://stackoverflow.com/questions/6112660/how-to-automatically-resize-the-size-of-text-inside-a-div) — Michel, Feb 21 '14 at 14:18
I've given an answer below that does exactly what you want, however I think you may want to look for a different solution to this issue. Using `@media` queries in your CSS files, you can either display the two `div`s below each other or reduce the font size on smaller screens. — Marijke Luttekes, Feb 21 '14 at 14:23

Marijke Luttekes · Accepted Answer · 2014-02-21T14:32:12.050

34

If you want to prevent your h1 to break into multiple lines, you can use the following statement:

h1 { white-space: nowrap; }

This only works in browsers which support CSS3 and you may have to set an overflow property on the containing element.

I do think you may want to look for a different solution to this issue. Your h1 is simply too big for your header on small screens.

Using @media queries in your CSS files, you can either display the two divs below each other or reduce the font size on smaller screens.

edited Feb 21 '14 at 14:32

answered Feb 21 '14 at 14:15

Marijke Luttekes

1,253
1
12
27

1

This works well but now the issue is that the h1 tag is too large and doesnt fit in its DIV. – onTheInternet Feb 21 '14 at 14:26
@onTheInternet Very correct, hence I already made a comment on the question itself. I'll update my answer in a bit to reflect that. – Marijke Luttekes Feb 21 '14 at 14:30

score 4 · Answer 2 · answered Feb 21 '14 at 14:15

4

Either use CSS:

#logo h1 {
    white-space: nowrap;
}

or change your title's text:

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

  is a HTML entity for a "non-braking space". I would be inclined using it since all browsers support it.

answered Feb 21 '14 at 14:15

This company is turning evil.

5,021
5
34
58

score 4 · Answer 3 · answered Nov 14 '19 at 17:31

4

This worked for me with BootStrap 4

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

The style="display:inline" had to be in both neighboring H tags for it to work.

answered Nov 14 '19 at 17:31

score 3 · Answer 4 · answered Feb 21 '14 at 14:16

3

Use white-space:nowrap; to achive what you are looking for.

For Instance,

#logo h1 {
   white-space: nowrap;
   }

answered Feb 21 '14 at 14:16

Nitesh

15,425
4
48
60

score 0 · Answer 5 · answered Aug 04 '20 at 20:01

0

Have you tried the following line?

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

It also works to avoid titles to break on mobile.

answered Aug 04 '20 at 20:01

Gabriel A Romero

1

score 0 · Answer 6 · answered Dec 02 '21 at 17:18

Before

 <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>

After solution

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

Prevent H1 tag from breaking to new line

6 Answers6

After solution