如何将文本换行到卡片中的新行（css，html）[重复]

Question

如果此文本长于图像宽度，我尝试将新行上的长文本（包括所有主要标题和附加标题）换行到新行。我怎样才能做到这一点？ 我还在 codepen 中提供了我的代码示例 https://codepen.io/myacat339/pen/OJEjWEZ。

角色元素需要水平滚动！

（我没有任何这些图像的权利，这只是为了举例！）

#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>

Answer 1

您需要以某种方式限制 .card 的宽度（我在此示例中使用了 max-width ）并摆脱了 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>

请注意卡片现在如何在底部对齐？这是因为您使用 display: inline-block 将所有卡片放在一行中：它们的默认行为是在底部对齐。我建议你去掉卡片上的内联块，改为在父级上设置 display: flex。

这是一个链接，看看我如何使用 flex 来做到这一点：https://jsfiddle.net/tkh1jfp7/

Answer 2

只需按照以下 CSS 更新您的 CSS：

.card {
    vertical-align: top;
}

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

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

它将 100% 为您工作