Question

如何在大小可变的数字周围放置一个固定大小的圆，如果它不适合该圆形，该数字会变小？

我正在查看How to use CSS to surround a number with a circle?，它与我的问题非常相似。我的问题来自更大的数字，其中的数字会溢出周围的圆圈。在这种情况下，数字的字体大小必须缩小。

我不想为任务使用JavaScript。但是，我确实考虑了SVG。

Answer 1

自从您提到您会考虑不使用JS的SVG，我希望这可以为您提供帮助https://codepen.io/anon/pen/daLoWN

<svg width="100" height="100" style="border: solid 2px; border-radius: 50%" xmlns="http://www.w3.org/2000/svg">
  <text x="0%" y="50%" textLength="100%">876543</text>
</svg>

Answer 2

怎么样？

.circle {
  display: inline-block;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  padding: 5px;
  background: red;
  color: white;
  text-align: center;
  line-height: 1;
  box-sizing: content-box;
  white-space: nowrap;
}
.circle:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
  height: 0;
}
.circle span {
  display: inline-block;
  vertical-align: middle;
}

<div class="circle"><span>PERFECTLY ROUND NO MATTER THE FONT SIZE!!!!!!</span></div>

这是小提琴：https://jsfiddle.net/fcjwyzsd/4/

Answer 3

好的，这怎么样？

function myFunction(){

var size = document.getElementById('num').innerHTML;

switch(size.length) {
  case 3:
    // code block
        // code block
    document.getElementById('num').style.fontSize = "60px";
    document.getElementById('num').style.marginTop = "15px";
    break;
  case 2:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  case 1:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  default:
    // code block
}

}

.circle{
  width:100px;
  height:100px;
  background-color:red;
  border-radius:50%;
  text-align:center;
}
div > span{
  display:inline-block;
  font-size:60px;
}

<body onload="myFunction();">

<div class="circle">
<span id="num">999</span>
</div>

</body>

提琴：https://jsfiddle.net/m3xhqr6n/1/

它包含1到3个单元号，您可以对其进行编辑以添加所需的内容，只是给您一个主意。

如何用缩放字体大小的圆包围数字？

3 个答案: