即使我将宽度分配给，文本也会溢出<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

:

Break long word with CSS (6 answers)

Closed 8 hours ago .

In the example code - I have given box 3 and box 4 widths of 200px I don't actually care for using these widths, but I have given them colours so you can see my problem better visually.

The problem is my text is not being contained by the parent <div> with a set (hardcoded) pixel width in box 3 especially it runs waaay out to the right in 1 line instead of wrapping inside the <div> . For box 4 , I can understand it's trying to stretch to the end, but if it were any longer it would again just run outside of the grid anyways. So theres something I'm missing to help wrap content. How do I solve this problem?

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

Make use of word-wrap property. Add word-wrap: break-word; on your .box3 and .box4 classes. More on it here .

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

I applied the .breakWord class style to the <div> elements with text overflow: you can set the break-word value to the overflow-wrap style so that they slide inside the container.

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