使用以下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;
*/
我已經嘗試了幾個小時來找出為什么 h1 超出了其父級的限制。
我試圖將 h1 保留在兩行（回應式）文本中。當您擴大視窗時，它會超過放置在主體上的 1600 像素限制。無論我是否嘗試最大寬度、溢位等，它都會一直開箱即用。
誰能告訴我我做錯了什么？我試圖弄清楚如何阻止 h1 超出上述限制。
最好的
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
如果您希望您的標題回傳到該行，您必須像這樣放置 wrap
white-space: wrap;
uj5u.com熱心網友回復：
就像其他人所說的那樣，您需要洗掉“空白”，這將導致文本進入兩行。如果您想防止這種行為，您必須將字體大小更改為更小。
之后，從“.uno”中洗掉邊距。這將確保 h1 元素保留在 div 中。無論孩子的大小如何，邊距當前都會將其推出 div，即使文本是回應式的。
另一個建議超出您正在尋找的內容，而不是將兩個跨度包裝在一個“h1”中，洗掉 h1，并將兩個跨度替換為 1 個“h1”元素，另一個替換為“h2”或任何子標題元素，具體取決于在你想要的尺寸上。如果您嘗試修改元素的位置（中心、左側、右側）而不是邊距，我建議您查看 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 class="fulltitle">
<h1 class="title_part" style="display: block; font-size: 5vw;";>stills & moving image</h1>
<h2 class="title_part" style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>
我對格式不利，我仍在學習如何在 stackoverflow 上發布答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525669.html
標籤：htmlcss反应灵敏