skip to Main Content

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


  1. This happens because you are using white-space: nowrap; on the .scrollable parent element. If you remove that and set word-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

    .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>
    Login or Signup to reply.
  2. The CSS property white-space: nowrap on div.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 your container class.

    As your dummy content has a quite long word, it will still overflow.
    Using word-wrap: break-word; on the container class will fix that problem as well.

    EDIT: as pointed out by @j08691 in the comments:

    Adding vertical-align: top to .card will bring them back into alignment

    Here is your code with the updated parts:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search