如何实现响应式span？长名称致图片显示异常的解决建议问询

针对你遇到的长名称导致图片显示不清的问题，以下是无需修改字体大小的解决方案：

核心问题分析 #

当前代码中.itemname使用负margin向上偏移，且未限制宽度和定位，长名称时容易覆盖上方的图片区域；同时图片的绝对定位缺少父级基准，布局稳定性差。

方案1：固定名称位置+自动换行 #

通过绝对定位将名称固定在容器底部，限制宽度并开启自动换行，确保不干扰图片区域：

修改后的CSS：

.holder {
    background-color:rgba(0, 0, 0, 0.534);
    height:65px;
    width:59px;
    position: relative; /* 作为内部绝对定位元素的基准 */
    padding-bottom: 18px; /* 给底部名称预留空间 */
    box-sizing: border-box; /* 让padding包含在容器宽高内 */
}
.itemname{
    font-family:boto;
    font-size:7px;
    color:white;
    background-color:rgba(0, 0, 0, 0.863);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 宽度与容器一致 */
    white-space: normal; /* 允许自动换行 */
    text-align: center; /* 文字居中优化显示 */
    padding: 2px 0;
}
.card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

HTML保持原结构即可，可移除图片的position:absolute;left:15%;，让它在card-body中居中显示：

<div class="card holder">
    <div class="card-body">
        <img src="icons\bullet.png" style="width:40px; height:36px;" alt="bullet">
        <h4 id="counter">1</h4>
    </div>
    <span class="itemname">9mm. Bullet Rounds</span>
</div>

方案2：Flex垂直布局 #

将容器设置为flex垂直排列，让图片区域占满上方空间，名称固定在底部自动换行：

修改后的CSS：

.holder {
    background-color:rgba(0, 0, 0, 0.534);
    height:65px;
    width:59px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.card-body {
    flex: 1; /* 占满容器剩余空间 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.itemname{
    font-family:boto;
    font-size:7px;
    color:white;
    background-color:rgba(0, 0, 0, 0.863);
    white-space: normal;
    text-align: center;
    padding: 2px;
}

效果说明 #

两种方案都能确保长名称在容器底部自动折行，不会向上覆盖图片区域；同时通过规范布局，让图片和计数器始终保持在独立的显示空间内，无需修改字体大小即可解决显示问题。

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