Div che si allunga in base alla lunghezza del testo dentro

Ho impostato il div così:

Codice HTML:

---

.archive-header {
        width: 300px;
        border-radius: 15px;

---

però il testo interno varia, ma il div rimane lungo uguale. C'è un modo per far allungare automaticamente il div in base alla lunghezza del testo?
Poi i padding li metto io.

Un <div> è di sua natura un elemento "blocco" (display: block; in CSS), e quindi occupa tutta la larghezza disponibile. Se lo fissi come sopra, diventa più piccolo ma resta inflessibile.

Un modo per farlo adattare alla larghezza del suo contenuto è trasformarlo in un elemento "lineare" usando display: inline; oppure display: inline-block;. I due valori funzionano in modo leggermente diverso, e se intuisco correttamente quello che ti serve qua è inline-block ;)

Codice:

---

.archive-header {
  border-radius: 15px;
  display: inline-block;
  /* ... */
}

---

Citazione:

---

Originalmente inviato da dreadnaut

Un <div> è di sua natura un elemento "blocco" (display: block; in CSS), e quindi occupa tutta la larghezza disponibile. Se lo fissi come sopra, diventa più piccolo ma resta inflessibile.

Un modo per farlo adattare alla larghezza del suo contenuto è trasformarlo in un elemento "lineare" usando display: inline; oppure display: inline-block;. I due valori funzionano in modo leggermente diverso, e se intuisco correttamente quello che ti serve qua è inline-block ;)

Codice:

---

.archive-header {
  border-radius: 15px;
  display: inline-block;
  /* ... */
}

---

---

Funziona questo display: inline-block; :shock:

Se vuoi più informazioni su display e display: inline-block;, questa è una buona pagina: https://www.freecodecamp.org/news/th...lock-and-more/