即使我將寬度分配給，文本也會溢出<div> [復制] </div><div id="text_translate"><div><aside class="s-notice s-notice__info post-notice js-post-notice mb16" role="status"><div class="d-flex fd-column fw-nowrap"><div class="d-flex fw-nowrap"><div class="flex--item wmn0 fl1 lh-lg"><div class="flex--item fl1 lh-lg"> 這個問題在這里已經有了答案：</div></div></div><div class="flex--item mb0 mt4"> <a href="/questions/18628038/break-long-word-with-css" dir="ltr" rel="nofollow noreferrer">用 CSS 打破長字</a><span class="question-originals-answer-count">6 個答案</span></div><div class="flex--item mb0 mt8"> <span title="2022-01-14 08:28:11Z" class="relativetime">8 小時前</span>關閉。</div></div></aside></div><p> 在示例代碼中 - 我給了<strong>框 3</strong>和<strong>框 4</strong>的寬度為200px我實際上並不關心使用這些寬度，但我給了它們顏色，以便您可以更好地直觀地看到我的問題。</p><p> 問題是我的文本沒有被父&lt;div&gt;包含在框 3 中具有設置（硬編碼）像素寬度，特別是它在 1 行中向右運行，而不是包裹在&lt;div&gt;內。 對於<strong>框 4</strong> ，我可以理解它試圖延伸到最后，但如果它不再是它，它就會再次跑出網格之外。 所以我缺少一些東西來幫助包裝內容。 我該如何解決這個問題？ </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe &gt;.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width. initial-scale=1.0"&gt; &lt;title&gt;III&lt;/title&gt; &lt;link rel="stylesheet" href="main:css"&gt; &lt;link rel="preconnect" href="https.//fonts.googleapis:com"&gt; &lt;link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin&gt; &lt;link rel="preconnect" href="https.//fonts.googleapis:com"&gt; &lt;link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin&gt; &lt;link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&amp;family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&amp;family=Rock+3D&amp;display=swap" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;nav&gt; &lt;div class="container"&gt; &lt;div class="logobutton"&gt; &lt;img class="smallu" src="images/ulogo-white.jpg"&gt; &lt;a class="homenugget" href="home.html"&gt;&lt;/a&gt; &lt;/div&gt; &lt;h1&gt;Ideas Imprint&lt;/h1&gt; &lt;div class="menu"&gt; &lt;a href="events.html"&gt;Events&lt;/a&gt; &lt;a href="about.html" class="is-active"&gt;About&lt;/a&gt; &lt;a href="login.html"&gt;Login&lt;/a&gt; &lt;a href="#"&gt;Dashboard&lt;/a&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;button class="hamburger"&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class="dropdownMenu"&gt; &lt;a href="events.html" class="link"&gt;Events&lt;/a&gt; &lt;a href="about.html" class="link"&gt;About&lt;/a&gt; &lt;a href="#" class="link"&gt;Login&lt;/a&gt; &lt;a href="#" class="link"&gt;Dashboard&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt; /nav&gt; &lt;div class="megawrap"&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box4box4box4box4 &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box4box &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wth"&gt;&lt;/div&gt; &lt;.-- Footer section --&gt; &lt;footer class="footer"&gt; &lt;div class="footer-container"&gt; &lt;div class="footer-row"&gt; &lt;div class="Footer-text-left"&gt; &lt;p&gt;Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.&lt;/p&gt; &lt;p&gt; Made with &lt;span class="hearted"&gt; ❤&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;.-- footer top --&gt; &lt;/footer&gt; &lt;.-- Footer section --&gt; &lt;script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p></div>

Question

這個問題在這里已經有了答案：

用 CSS 打破長字6 個答案

8 小時前關閉。

在示例代碼中 - 我給了框 3和框 4的寬度為200px我實際上並不關心使用這些寬度，但我給了它們顏色，以便您可以更好地直觀地看到我的問題。

問題是我的文本沒有被父<div>包含在框 3 中具有設置（硬編碼）像素寬度，特別是它在 1 行中向右運行，而不是包裹在<div>內。 對於框 4 ，我可以理解它試圖延伸到最后，但如果它不再是它，它就會再次跑出網格之外。 所以我缺少一些東西來幫助包裝內容。 我該如何解決這個問題？

 * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

Answer 1

利用word-wrap屬性。 添加word-wrap: break-word; 在您的.box3和.box4類上。 更多關於它的信息。

 * { margin: 0; padding: 0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body { background: rgb(7, 7, 7); color: #fff; }.imgContainer { width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom: 10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom: 10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget { height: 70px; width: 50px; position: fixed; top: 5px; left: 32px; opacity: 0; user-select: none; }.smallu { height: 50px; width: 50px; user-select: none; }.container { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } nav { position: relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display: none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a { color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover { background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link { display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth { padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding: 50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size: 16px; line-height: 22px; }.hearted { color: red; font-size: 12px; }.opacityStyle { opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe>.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing: 3px; margin: 0 3%; line-height: 70px; text-transform: uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing: 1px; font-size: 15px; font-weight: 300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color: rgb(75, 243, 255); }.error_message { color: #fc6e51; padding-bottom: 15px; font-size: 13px; line-height: 30px; } #success_page { color: #9ce726; padding-bottom: 10px; font-size: 12px; } #success_page h3 { font-size: 17px; font-weight: 400px; color: #4ab217; } #success_page p { font-size: 12px; font-weight: 400px; color: #b3b3b3; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART -------------------------------------------------------------------------------*/.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width: 300px; height: 300px; background: blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row: 2/3; background: blue; word-wrap: break-word; }.box4 { width: 200px; grid-column: 1/4; grid-row: 4/4; background: #fc6e51; word-wrap: break-word; }.wrapper { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap: 10px; max-height: 55vh; background: #212121; }.megawrap { display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART END -------------------------------------------------------------------------------*/ @media (min-width: 1080px) {.bodyC2 { max-width: 360px; padding-left: 150px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1175px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1400px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger { display: none; }.dropdown { display: none; }.menu { display: flex; }.bodyContainer { flex-direction: row; }.bodyC2 { flex-direction: column; padding-top: 100px; } } /* Once completely tiny shrink text to columns */ @media (max-width: 975px) {.bodyContainer { flex-direction: column; }.bodyC2 { flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

Answer 2

我將.breakWord class 樣式應用於具有文本溢出的<div>元素：您可以將break-word值設置為overflow-wrap樣式，以便它們在容器內滑動。

 * { margin:0; padding:0; } /* Added the following class style */.breakWord { overflow-wrap: break-word; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <!-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <!-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box </div> </div> </div>