使用按钮名称和图标反应引导按钮自定义

Question

如何根据按钮名称动态调整按钮高度？

看，名字被裁剪了。 到目前为止，我已经完成了以下工作：

index.css

.btn-product {
    background-color: white;
    color: black;
    border-radius: 25px;
    border: 2px solid black;
    text-align: left;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    margin-top: 4px;
    width: 200px;
    height: 50px;
}

index.js

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

要求如下：

1. 按钮名称应左对齐
2. '>' 图标应右对齐
3. 单击按钮后，新的浏览器选项卡会打开并带有链接。
4. 按钮应该像图片一样圆润。
5. 如果名称太长，则不应裁剪，而应调整按钮高度。

只有数字 5 没有完成。你能帮我吗？ 如何动态调整按钮高度？

Answer 1

1. 将 display 属性更改为 inline-flex 并将高度更改为 min-height
2. 从跨度中删除绝对值并从雪佛龙上浮动
3. 为按钮添加 flex-flow: row nowrap、align-items: center 以及 justify-content: space-between。

.button { 
    display: inline-flex; 
    flex-flow: row nowrap; 
    min-height: 50px; // allows it to grow if the name is longer.
    align-items: center; 
    justify-content: space-between; 
}