Вопросы Теги

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

Вы отменяете Content, установленный триггером, устанавливая атрибут Content на уровне управления. Вы хотите установить его с помощью Setter в стиле Style: 

<ToggleButton>
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
         <Setter Property="Content" Value="&lt;" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="&gt;" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>
0
задан Persijn 20 February 2019 в 13:18
поделиться

3 ответа

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

.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
ответ дан Antony Lawlor 20 February 2019 в 13:18
поделиться

Поскольку вы упомянули, что вы рассматриваете 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>
.
0
ответ дан krsna 20 February 2019 в 13:18
поделиться

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

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

0
ответ дан Antony Lawlor 20 February 2019 в 13:18
поделиться