Как окружить число кружком с масштабируемым размером шрифта? - PullRequest
Новая
       47

Как окружить число кружком с масштабируемым размером шрифта?

0 голосов
/ 20 февраля 2019

Как я могу иметь круг фиксированного размера, окружающий число переменного размера, которое становится меньше, если оно не помещается в круг?

Я смотрел на Как использовать CSS для окружениячисло с кружком? , что довольно похоже на мою проблему.Моя проблема возникает с большими числами, где число переполняет окружающий круг.В этом случае размер шрифта должен уменьшиться.

Я не хочу использовать JavaScript для этой задачи.Тем не менее, я считаю SVG.

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

Как насчет этого? 

.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/

0 голосов
/ 20 февраля 2019

Хорошо, а как насчет этого? 

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>

Fiddle: https://jsfiddle.net/m3xhqr6n/1/

Учет от 1 до 3 номеров единиц, вы можете редактировать, чтобы добавить в то, что вам нравитсяПросто дает вам представление.

0 голосов
/ 20 февраля 2019

Поскольку вы упомянули, что вы рассматриваете SVG без JS, я надеюсь, что это может помочь вам 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>
...