如何在CSS中创建始终保持相同大小的圆圈?

Question

我有一个问题，我有一个圆圈，根据文本的内容进行调整。但是，我希望字体大小可以根据圆圈来调整，而不是让圆圈改变大小。

如何在CSS中实现这一点?我使用react 18和style -components。

不应该这样做的例子。

请注意，圆圈在任何设备上都应保持圆形。

我希望你的想法

E10(轮轴)

柴油机(非循环)

Answer 1

我想你需要一点javascript。

这里有一个简单的例子。文本的大小逐渐增加，直到它比您想要的更宽，然后每个圆圈中的文本减少1。

const tester = document.createElement('div');
tester.setAttribute('class', 'tester');
document.body.append(tester);
const circles = document.querySelectorAll('.circle');
circles.forEach(circle => {
let fs = 2; // 1px is the smallest we can go
tester.innerHTML = circle.innerHTML;
tester.style.fontSize = fs + 'px';
let w = window.getComputedStyle(tester).width.replace('px', '');
while (w < 40) { //allow for some space left and right so not the full 50
fs++;
tester.style.fontSize = fs + 'px';
w = window.getComputedStyle(tester).width.replace('px', '');
};
circle.style.fontSize = (fs - 1) + 'px';
});
tester.remove();

.circle {
color: white;
background-color: darkblue;
border-radius: 50%;
width: 50px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
}
.tester {
width: fit-content;
position: absolute;
}

<div class="circle">text</div>
<div class="circle">longer text</div>