Auf der Suche nach einer Möglichkeit ein Icon oder Buchstaben vor einen Text zu setzen bin ich über folgenden Code gestolpert.
CSS:
initial {
align-items: center ;
display: flex ;
font-size: 12px ;
margin: 10px 0px 10px 0px ;
}
.initial::before {
content: attr( data-initials ) ;
align-items: center ;
display: flex ;
justify-content: center ;
background-color: #111111 ;
border-radius: 100% 100% 100% 100% ;
color: #ffffff ;
font-size: 12px ;
font-weight: 600 ;
height: 36px ;
letter-spacing: 1px ;
line-height: 12px ;
margin-right: 10px ;
text-transform: uppercase ;
width: 36px ;
}
HTML:
<div data-initials="A" class="initial">
This is a smaller text.
</div>
<div data-initials="A" class="initial">
This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.
</div>Soweit so gut. Allerdings bemerkte ich schnell dass immer, wenn der Text zu lang war und es einen Umbruch gab, die runden Kreise mit den Buchstaben nicht mehr 36px groß waren, sondern zu Eiern schrumpften, obwohl im CSS so angegeben :-)
Der Grund ist, dass es einem Element standardmäßig erlaubt ist sich im Flexbox-Context zu verkleinern. Ein kleiner Eintrag im CSS behebt dies.
.initial::before {
...
flex-shrink: 0;
...
}Das Ergebnis sieht dann so aus:
