带SVG图标的Flexbox按钮文本溢出问题求助

你的按钮文本溢出是因为设置了justify-content: space-between，这个属性会强制flex子元素（SVG和文本）分布在容器两端，当按钮作为inline-flex容器时，若父容器存在宽度限制，或者文本长度超出预期，就会导致文本被挤压溢出，无法自适应内容宽度。

解决步骤 #

• 移除.btn中的justify-content: space-between，替换为justify-content: flex-start（也可选择center，根据你需要的对齐方式调整），让内容紧密排列
• 保留.btn:has(svg)中的gap属性控制SVG和文本的间距，这比space-between更适合实现内容自适应的按钮

修改后的完整代码 #

CSS #

:root {
    --green: hsl(150.22deg 60.35% 44.51%);
    --green-dark: hsl(150.22deg 60.35% 35%);
    --green-light: hsl(148.89deg 87.1% 93.92%);
    --blue: hsl(202.86deg 77.78% 15.88%);
}

.btn {
    text-decoration: none;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* 替换为flex-start实现内容紧密排列 */
    justify-content: flex-start;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: capitalize;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.btn--green {
    background-color: var(--green);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.btn:has(svg) {
    gap: 0.75rem;
}

.btn svg {
    display: block;
    max-height: 16px;
    max-width: 16px;
    flex-shrink: 0;
    fill: #fff;
}

HTML #

<a href="#" class="btn btn--green">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg>
    Button With Icon
</a>

<br>

<a href="#" class="btn btn--green">
    Button Without Icon
</a>

修改后，按钮会根据内部SVG和文本的总宽度自适应调整，不会出现文本溢出的问题。

内容的提问来源于stack exchange，提问作者KodeFor.Me