HTML und CSS Fluid Circle

Question

Ich versuche, einen fließenden Kreis mit HTML und CSS zu erstellen. Ich bin fast fertig, aber da er flüssig sein sollte und der Inhalt darin dynamisch ist, ändert er seine Form von Kreis zu Oval und anderem.

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}

<div class="notify">
  <div>
    12
  </div>
</div>

Können Sie mir bitte helfen?

Answer 1

Erzwingen der maximalen Höhe und des maximalen Gewichts durch Einstellung max-width:XXpx; max-height:XXpx wird die Aufgabe erfüllen.

Bitte beachten Sie, dass Sie möglicherweise CSS3 verwenden müssen word-wrap: break-word; um die Wörter zu unterbrechen. Die Kompatibilität mit anderen Browsern könnte ein Problem sein.