这个是不是你要的效果？根据文字长度自动变化圆的大小?
css代码.box{
display: inline-flex;
justify-content: center;
position: absolute;
}
.box1{
padding-top: calc(100% + 20px);
visibility: hidden;
min-width: 12px;
min-height: 12px;
}
.box2{
position: absolute;
padding-top: calc(100% + 20px);
width: calc(100% + 20px);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
border-radius: 50%;
}
.box3{
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
html代码
2 2
这里 保持 box1 和 box3中的 文本内容一致即可。
