How to make <p> text move down instead of outside the div
P粉461599845
2023-08-17 18:58:37
<p>Hi, I have a problem with my card slider, <code><p></code> the tag keeps going out of bounds but I want it to slide down to fit the long description The entire text, how do I do that? </p>
<p>If you see when I use long text, the text ends up outside the delimiter, but I want it to stay inside</p>
<p>I tried using <code>word-wrap: break-word;</code> but it didn’t work for me</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">div.scroll-container {
background-color: #7289da;
white-space: nowrap;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.card {
float: none;
display: inline-block;
zoom: 1;
padding: 10px;
width: 375px;
height: 525px;
}
.container {
padding: 2px 16px;
background-color: #fff;
color: #000;
height: 200px;
}
.container p {
color: #000;
font-size: 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="scroll-container" id="cardslist">
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is because you used
white-space: nowrap;on the.scrollableparent element. If you remove this setting and setword-break: break-word;on.card, your text will wrap correctly.However, this will break your layout, since you're obviously relying on
nowrapto fit multiple elements into the same row.Try to use flexbox layout. It's simpler and requires less code.
.scroll-container { background-color: #7289da; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; /*Flexbox setup!*/ display: flex; } .card { /*float: none; display: inline-block; zoom: 1; height: 525px;*/ padding: 10px; width: 375px; /* Added */ flex-shrink: 0; word-break: break-word; } .container { padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }<div class="scroll-container" id="cardslist"> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> </div>CSS property
white-space: nowrapPrevents spaces from wrapping ondiv.scroll-container. Mozilla has a demo demo about this CSS property.A possible fix is to explicitly set it back to
normalfor yourcontainerclass.Since your dummy content has a fairly long word, it will still overflow. Using
word-wrap: break-word;on thecontainerclass can also solve this problem.Edit: As pointed out by @j08691 in the comments:
This is the updated part of the code:
div.scroll-container { background-color: #7289da; white-space: nowrap; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .card { float: none; display: inline-block; zoom: 1; padding: 10px; width: 375px; height: 525px; vertical-align: top; } .container { white-space: normal; word-wrap: break-word; padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }<div class="scroll-container" id="cardslist"> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> </div>