将 h1 内容保留在 div 中答案

【问题标题】：keep h1 content within a div将 h1 内容保留在 div 中
【发布时间】：2022-11-02 20:28:12
【问题描述】：

使用以下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 class="about">
            <h4><span>A work selection by </span><a href="">mfowmyoxsnk</a></h4>
        </div>
    </header>

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

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

        <article class="dos">

        </article>

    </main>

</body>
</html>

和以下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;
*/

我已经尝试了几个小时来找出为什么超出其父级的限制。无论我是否尝试最大宽度、溢出等，它都会一直开箱即用。

谁能告诉我我做错了什么？

最好的

一旦我不知道还能做什么，我已经尝试过限制一些子元素的宽度，包括一些溢出选项和一些其他随机的东西。

【问题讨论】：

标签： html css responsive

【解决方案1】：

正是 white-space: nowrap; 可以防止您的跨度在父项中填充内容时中断您的行。删除它，您的代码将正常工作

工作小提琴

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 class="about">
    <h4><span>A work selection by </span><a href="">mfowmyoxsnk</a></h4>
    </div>
</header>

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

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

    <article class="dos"></article>
</main>

【讨论】：

【解决方案2】：

如果您希望您的标题返回到该行，您必须像这样放置 wrap

white-space: wrap;

【讨论】：