How to wrap text to new line in card (css, html)

Question

I try to wrap long text on new line (including all titles main and additional) to new line if this text longer then image width. How can i do this? I also provide example of my code in codepen https://codepen.io/myacat339/pen/OJEjWEZ.

Roles element need to be horizontal scrollable!

(I don't have rights of any of these images this only for example!)

#rolecard {
    margin-left: 10px;
    margin-bottom: 10px;
}
#containerimgrole {
    width: 150px;
    border-radius: 10px;
    background-color: #000000;
}
#cardmaintext {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 5px;
    display: inline-block;
    font-family: "Roboto",serif;
    font-weight: 600;
    text-decoration: none;
    hyphens: auto;
}
#cardadditionaltext {
    color: #4d4d4d;
    font-size: 0.65rem;
    margin-top: 5px;
    display: inline-block;
    font-family: Roboto,serif;
    text-decoration: none;
    font-weight: 450;
}
#roles {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    background-color: #1e1e1e;
    white-space: nowrap;
}
#characterstitle {
    font-family: "Segoe UI",serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: inline-block;
    text-decoration: none;
    color: #eaeaea;
}
.card {
    display: inline-block;
    text-align: center;
}
.scrolling-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}
.scrolling-wrapper:hover {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

<div id="roles" style="padding-right: 0.5rem; display: inline-block; margin-top: 5px; border-radius: 15px; margin-left: -3px; width: 60rem;">
      <a id="characterstitle" style="margin-bottom: 10px;">Title</a>
      <div style="display:block;" class="scrolling-wrapper">
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Normal text</a>
            <br>
            <a id="cardadditionaltext">Normal text</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
            <br>
          </div>
        </div>
        
      </div>
</div>

On a sidenote, you a have a lot of duplicate id's in your code. Id's should be unique, so in this case use classes instead — VilleKoo, Nov 17 '22 at 13:07
Use [Lorem Picsum](https://picsum.photos/) for example images — Peter Krebs, Nov 17 '22 at 13:08

Jonas Grumann · Accepted Answer · 2022-11-17T13:27:38.263

You need to somehow limit the width of the .card (I used max-width in this example) and get rid of the white-space: nowrap

#rolecard {
    margin-left: 10px;
    margin-bottom: 10px;
}
#containerimgrole {
    width: 150px;
    border-radius: 10px;
    background-color: #000000;
}
#cardmaintext {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 5px;
    display: inline-block;
    font-family: "Roboto",serif;
    font-weight: 600;
    text-decoration: none;
    hyphens: auto;
}
#cardadditionaltext {
    color: #4d4d4d;
    font-size: 0.65rem;
    margin-top: 5px;
    display: inline-block;
    font-family: Roboto,serif;
    text-decoration: none;
    font-weight: 450;
}
#roles {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    background-color: #1e1e1e;
}
#characterstitle {
    font-family: "Segoe UI",serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: inline-block;
    text-decoration: none;
    color: #eaeaea;
}
.card {
    display: inline-block;
    text-align: center;
    max-width: 200px;
}
.scrolling-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
}
.scrolling-wrapper:hover {
    overflow-x: auto;
    overflow-y: hidden;
}

<div id="roles" style="padding-right: 0.5rem; display: inline-block; margin-top: 5px; border-radius: 15px; margin-left: -3px; width: 60rem;">
      <a id="characterstitle" style="margin-bottom: 10px;">Title</a>
      <div style="display:block;" class="scrolling-wrapper">
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Normal text</a>
            <br>
            <a id="cardadditionaltext">Normal text</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
            <br>
          </div>
        </div>
        
      </div>
</div>

Note how now the cards align at the bottom? This is because you're using display: inline-block to put all the cards on one line: their default behaviour is to align at the base. I suggest you get rid of the inline-block on the cards and set display: flex on the parent instead.

Here's a link to see how I would do it using flex: https://jsfiddle.net/tkh1jfp7/

Glad it worked. One thing, I used 250px as a max-value; that is an arbitrary number, I suggest you set it to a percentage value to make sure there's a just enough room for the cards to stack nicely on one row without leaving empty space, something like 25% (4 cards on a row), or 20% (5 cards on a row). — Jonas Grumann, Nov 17 '22 at 13:24
I added a link to a jsfiddle at the bottom of my answer to show what I meant with my last comment. — Jonas Grumann, Nov 17 '22 at 13:27

score 0 · Answer 2 · answered Nov 17 '22 at 13:10

Just update your CSS as per below CSS:

.card {
    vertical-align: top;
}

.card #cardrole {
    width: 150px;
    white-space: normal;
}

#containerimgrole {
    width: 100%;
    border-radius: 10px;
    background-color: #000000;
}

It will 100% work for you

How to wrap text to new line in card (css, html)

2 Answers2