如何用CSS/HTML实现卡片文本超图片宽度时自动换行

希望卡片中的主文本、附加文本等长文本在宽度超过图片时自动换行，同时roles元素保持横向可滚动。当前效果如下：

原代码 #

CSS

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

HTML

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

核心是固定卡片宽度与图片一致，同时打破父级容器的white-space: nowrap对文本的限制，让文本在卡片宽度内自动换行。具体修改如下：

修改后的CSS #

#rolecard {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 150px; /* 与图片宽度保持一致，固定卡片范围 */
    display: inline-block;
    vertical-align: top; /* 避免文本换行后卡片错位 */
}
#containerimgrole {
    width: 150px;
    border-radius: 10px;
    background-color: #000000;
}
#cardmaintext {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 5px;
    display: block; /* 让文本占满卡片宽度 */
    font-family: "Roboto",serif;
    font-weight: 600;
    text-decoration: none;
    hyphens: auto;
    white-space: normal; /* 强制文本换行 */
}
#cardadditionaltext {
    color: #4d4d4d;
    font-size: 0.65rem;
    margin-top: 5px;
    display: block; /* 让文本占满卡片宽度 */
    font-family: Roboto,serif;
    text-decoration: none;
    font-weight: 450;
    white-space: normal; /* 强制文本换行 */
}
#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 {
    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;
}

修改后的HTML #

<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" />
            <a id="cardmaintext">Normal text</a>
            <a id="cardadditionaltext">Normal text</a>
          </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" />
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
          </div>
        </div>
        
      </div>
</div>

修改说明 #

1. 给#rolecard设置固定宽度（与图片一致），限制文本的可展示范围
2. 将文本元素的display改为block，并添加white-space: normal，强制文本在卡片宽度内自动换行
3. 移除HTML中的<br>标签，用CSS的margin控制间距更灵活
4. 给#rolecard添加vertical-align: top，确保所有卡片顶部对齐，避免文本换行后出现布局错位

修改完成后，长文本会自动在图片宽度内换行，同时roles容器的横向滚动功能保持正常。

内容的提问来源于stack exchange，提问作者cat339