Ich habe einen Kreis mit Text:

.circle {
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin-right: 10px;
}
<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

In diesem Beispiel reagiert der Kreis nicht, wenn die Zahl groß ist. Wie kann ich Kreise erstellen, die mit width: 30px und height: 30px reagieren? Ich brauche nur diese Größen für Kreise.

css
0
Dumitru 20 Jän. 2019 im 13:57

3 Antworten

Beste Antwort

Verwenden Sie die folgende Polstertechnik, um reaktionsfähige Kreise zu erstellen ::

.circle {
    position:relative;
    display:inline-block;
    margin-right: 10px;
}
.circle span {
    padding:60% 10%;
    margin-top:-0.6em;
    display:flex;
}
.circle span:after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:120%;
    padding-bottom:120%;
    background-color:#eee;
    border-radius:50%;
    z-index:-1;
 }
<div class="circle"><span>0</span></div>
<div class="circle"><span>100</span></div>
<div class="circle"><span>10000</span></div>
<div class="circle"><span>1000000000000</span></div>

BEARBEITEN: Wenn Sie die Kreisgröße beibehalten möchten, aber die Schriftgröße ändern möchten, haben Sie verschiedene Möglichkeiten, um eine reaktionsfähige Schriftgröße basierend auf der übergeordneten Breite zu erzielen: https://css-tricks.com/fitting-text-to-a -container /

2
Laurens 20 Jän. 2019 im 12:25

Die Reaktionsfähigkeit des Layouts gilt nur, wenn die Größe der Webseite geändert oder auf einer anderen Bildschirmgröße angezeigt wird (je nach Gerät). In Ihrem Fall müssen Sie möglicherweise die Größe des Kreises anpassen oder die Schriftgröße des Texts verringern. Weitere Informationen zum reaktionsschnellen Layout finden Sie hier https://www.w3schools.com/html/html_responsive.asp

.circle {
  width: 60px;
  height: 60px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  display: inline-block;
  margin-right: 10px;
}
<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>
0
Romel Indemne 20 Jän. 2019 im 11:16

Im Folgenden wird die Größe des Kreises an den Text angepasst.

.circle {
            text-align: center;
            line-height: 30px;
            display: inline-block;
            margin-right: 10px;
            background: #777777;
            border-radius: 50%;
        }
<a class="circle">0</a>
<a class="circle">10</a>
<a class="circle">100</a>
<a class="circle">1000</a>
<a class="circle">10000</a>

<br>

<a class="circle">1000000<br>1000000</a>

Alternativ können Sie overflow: hidden; zum CSS hinzufügen:

.circle {
            width: 30px;
            height: 30px;
            background: #777777;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            margin-right: 10px;
            overflow: hidden;
        }
<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>
0
the Wongfon Semicolon 20 Jän. 2019 im 11:32