flex容器内div独占整行导致同排元素换行如何用HTML CSS修复

问题原因 #

.iconwrapper 是div块级元素，默认独占一行、宽度占满父容器100%，你设置的min-width:0不改变块级元素的默认排列特性，因此后续的span元素会被挤到下一行显示。

修复方案 #

方案1：修改为行内块级元素（改动最小） #

给.iconwrapper新增两个属性即可：

.iconwrapper {
    min-width:0;
    /* 新增以下内容 */
    display: inline-block;
    vertical-align: middle; /* 让图标和旁边的文字垂直居中对齐 */
}

无需修改HTML结构，原有text-align:center属性可以正常让图标+文字整体居中。

方案2：父级用flex布局（适配性更强，后续扩展更方便） #

给父容器.wrapper新增flex相关属性：

.wrapper {
    min-width: 0%;
    max-width: 100%;
    line-height: 21px;
    position:relative;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-height: 50px;
    text-align:center;
    /* 新增以下内容 */
    display: inline-flex; /* 也可以设为flex，根据父级布局需求调整 */
    align-items: center;
    justify-content: center;
    gap: 4px; /* 可自定义调整图标和文字的间距 */
}

如果需要保留文字溢出省略效果，额外给span元素新增属性：

.wrapper span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

额外提示 #

你现有HTML代码末尾的闭合标签有误，把</div>写成了<div>，建议修正：

<div class="wrapper">
    <div class="iconwrapper">
        <svg/>
    </div>
    <span>sometext</span>
</div> <!-- 修正此处的闭合标签 -->

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