keep h1 content within a div-CodePudding

with the following html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Company Home Page with Flexbox</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <header>
        <div >
            <h4><span>A work selection by </span><a href="">mfowmyoxsnk</a></h4>
        </div>
    </header>

    <main>
        
        <article >
            <div >
                <h1>
                    <span  style="display: block; font-size: 12vw";>stills & moving image</span>

                    <span  style="display: block; font-size: 11vw";>TECHNICAL PRODUCTION</span>
                </h1>
            </div>
        </article>

        <article >

        </article>

    </main>

</body>
</html>

and the following css:

html {
  box-sizing: border-box;
  font-size: 16px;
}
                    
body {
    max-width: 1600px;
    margin: 0 auto;
    border: 1px solid red;
    }

main {

}

@font-face {
    font-family: 'Alternate Gothic';
    src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}

@font-face {
    font-family: 'Times Roman';
    src: url('OPTITimes-Roman.otf') format('opentype');
}

.about {
    text-align: center;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #000;
    margin: 0 5vw;
}

.fulltitle {

}

h1 {
    font-family: 'Alternate Gothic';
    text-align: center;
    border: 1px solid red;
    display: inline-block;
}

.uno {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #000;
    margin: 0 4vw;
    max-width: 1600px;
    position: relative;
}

.title_part {
    margin: 0 auto;
    white-space: nowrap;

}

/*
border: 1px solid red;
*/

I have tried for hours to find out why the h1 goes beyond the limits of its parent.

I am trying to keep h1 in two lines of (responsive) text. When you grow the window it goes above the 1600px limit placed on the body. No matter if I try max-width, overflow, etc that it keeps getting out the box.

Can anybody tell me what am I doing wrong? Im trying to figure out how to stop the h1 to go beyond the above limit.

Best

CodePudding user response：

It is the white-space: nowrap; which prevents your span to break your lines when the content is filled in the parent. Remove that and your code will work fine

Working Fiddle

html {
    box-sizing: border-box;
    font-size: 16px;
}

body {
    max-width: 1600px;
    margin: 0 auto;
    border: 1px solid red;
}

main {
}

@font-face {
    font-family: "Alternate Gothic";
    src: url("Alternate Gothic W01 No 3.ttf") format("truetype");
}

@font-face {
    font-family: "Times Roman";
    src: url("OPTITimes-Roman.otf") format("opentype");
}

.about {
    text-align: center;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #000;
    margin: 0 5vw;
}

.fulltitle {
}

h1 {
    font-family: "Alternate Gothic";
    text-align: center;
    border: 1px solid red;
    display: inline-block;
}

.uno {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #000;
    margin: 0 4vw;
    max-width: 1600px;
    position: relative;
}

.title_part {
    margin: 0 auto;
    /* white-space: nowrap; */
}

<header>
    <div >
    <h4><span>A work selection by </span><a href="">mfowmyoxsnk</a></h4>
    </div>
</header>

<main>
    <article >
    <div >
        <h1>
        <span  style="display: block; font-size: 12vw" ;
            >stills & moving image</span
        >

        <span  style="display: block; font-size: 11vw" ;
            >TECHNICAL PRODUCTION</span
        >
        </h1>
    </div>
    </article>

    <article ></article>
</main>

CodePudding user response：

If you want your title to return to the line you have to put wrap like this

white-space: wrap;

CodePudding user response：

Like the others have said you need to remove the "white-space", this will cause the text to go in to two lines. If you want to prevent this behavior you will have to change the font-size to be smaller.

After that, remove the margin from ".uno". This will ensure that the h1 element remains in the div. The margin currently pushes it out the div no matter the size of the child, even if the text is responsive.

Another recommendation beyond what you're looking for, instead of wrapping two spans in a single "h1", remove the h1, and replace the two spans with 1 "h1" element and the other with a "h2" or whatever subheader element depending on the size you want. If you are trying to modify the positions of elements(center, left, right) instead of margins I recommend looking into flexbox.

.uno {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #000;
    max-width: 1600px;
    position: relative;
}

.title_part {
    margin: 0 auto;
}

<div >
    <h1  style="display: block; font-size: 5vw;";>stills & moving image</h1>
    <h2  style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>

My bad for the formatting, I'm still learning how to post answers on stackoverflow.