Ограничить ширину для блока с текстом

Question

<svg viewBox="0 0 31 31">
      <ellipse rx="14" ry="14" cx="15" cy="16" stroke="rgb(142, 142, 142, 26%)" fill="none" stroke-width="2"></ellipse>
      <text x="15" y="16" text-anchor="middle" dominant-baseline="central" style="font-size: 0.6em;" stroke="22">115%</text>
      <circle cx="18" cy="15" r="14" transform="rotate(-90 17 17)" stroke-width="2" style="stroke-dashoffset: 95px;"></circle>
</svg>

Как можно ограничить максимальную ширину блока с текстом. Чтобы не так близко к краям...

Еще вопрос

#Progress {
    fill: none;
    stroke: rgb(255, 0, 0, 42%);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s;
}
.uploads {
    width: 70%;
    max-width: 100px;
    min-width: 30px;
    z-index: 12000;
}

    <svg viewBox="0 0 31 31" class="uploads up1">
         <ellipse rx="14" ry="14" cx="15" cy="16" stroke="rgb(142, 142, 142, 26%)" fill="none" stroke-width="2"></ellipse>
         <text x="15" y="16" text-anchor="middle" dominant-baseline="central" style="font-size: 0.5em; letter-spacing: 1px;">100%</text>
         <circle id="Progress" cx="18" cy="15" r="14" transform="rotate(-90 17 17)" stroke-width="2" style="stroke-dashoffset: 10px;"></circle>

Прогресс бару присвоено свойство stroke-dashoffset: 10px;, то есть осталось 10% до полной загрузки. Прогресс бар показывает 100% и так на всем протяжении. То есть он идет на опережение. В чем тут дело?

Answer 1

В вашем случае я бы предложил уменьшить межбуквенный интервал, при помощи свойства letter-spacing

.litter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border: 4px solid #777;
  font-size: 30px;
  letter-spacing: -5px;
  border-radius: 50%;
  box-sizing: border-box;
}

<div class="litter">100%</div>

Ну или изначально подогнать размер шрифта, чтобы при максимальном значение не вылезало.

БЛОГ НА HUSL

Ограничить ширину для блока с текстом

Ответы (1 шт):