React Bootstrap Button自定义：如何根据按钮名称动态调整高度避免文字裁剪

DevOps 小满

2026-10-1

核心问题原因

你当前的代码有两个导致文字被裁剪、高度无法自适应的核心错误：

给.btn-product设置了固定height: 50px + overflow: hidden，强制限制了容器最大高度，超出内容直接裁剪
按钮内的文字span设置了position: absolute，脱离正常文档流，父元素高度不会被文字内容撑开

修改方案

1. 调整index.css样式

.btn-product {
    background-color: white;
    color: black;
    border-radius: 25px;
    border: 2px solid black;
    /* 替换固定高度为最小高度，保证短文字时基础高度不变 */
    min-height: 50px;
    margin-top: 4px;
    width: 200px;
    /* 改用Flex布局实现左右对齐，替代原来的绝对定位+浮动 */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    /* 加左右内边距，避免文字和图标贴边 */
    padding: 8px 12px;
}

2. 调整index.jsx结构

移除span的绝对定位样式，删掉图标的float属性，Flex布局会自动处理对齐：

return (
    <div>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/sign-up'>
            <span>Button 1 with a long name</span>
            <BiChevronRight size={30} style={{color: 'orange'}} />
        </Button>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/login'>
            <span>Button 2 with a long name</span>
            <BiChevronRight size={30} style={{color: 'orange'}} />
        </Button>
    </div>
)