Hello i have a problem with my cards slider the <p>
tag keeps going out but i want it to do down in order to fit the whole text for long descriptions how would i go about that?
If you see when i use long text the text ends up getting out the divider but instead i want it be kept inside
I tried using word-wrap: break-word;
but it doesn’t work for me
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;
}
<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>
2
Answers
This happens because you are using
white-space: nowrap;
on the.scrollable
parent element. If you remove that and setword-break: break-word;
on.card
your text will properly wrap.However this breaks your layout since you were obviously relying on the
nowrap
to make multiple elements fit on the same line.Try using a flexbox layout. It’s much simpler and requires less code
The CSS property
white-space: nowrap
ondiv.scroll-container
prevents line wrapping on whitespaces. Mozilla has a nice demo about that CSS property.One possible fix is to explicitly set it back to
normal
for yourcontainer
class.As your dummy content has a quite long word, it will still overflow.
Using
word-wrap: break-word;
on thecontainer
class will fix that problem as well.EDIT: as pointed out by @j08691 in the comments:
Here is your code with the updated parts: