Início / user-4610531

Michael's questions

Martin Hope
Michael
Asked: 2025-04-11 15:18:56 +0800 CST
  • 5

O ícone encolhe quando o texto é quebrado e fica menor que os 36 px especificados em CSS. Exemplo

O ícone é incluído usando o pseudoelemento "antes".

Alguma ideia do porquê isso acontece e como consertar?

A sintaxe é a seguinte:

.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;
  height: 36px;
  letter-spacing: 1px;
  line-height: 12px;
  margin-right: 10px;
  text-transform: uppercase;
  width: 36px;
}
<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This is a smaller text.
  </div>
</div>

<div class="row">
  <div data-initials="A" class="col-md-6 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>
</div>

html