Schrumpf DIV zu Text, der auf seine maximale Breite gewickelt ist?

Es ist ziemlich einfach, ein div in einen Text einzufügen. Wenn der Text jedoch aufgrund einer maximalen Breite (als Beispiel) in eine zweite Zeile (oder mehrere Zeilen) umbrochen wird, wird die Größe des DIV nicht auf den neu eingepackten Text verkleinert. Es wird immer noch bis zum Unterbrechungspunkt erweitert (in diesem Fall der Wert für die maximale Breite), wodurch auf der rechten Seite des DIV ein angemessener Betrag an Marge entsteht. Dies ist problematisch, wenn Sie diesen DIV so zentrieren möchten, dass der eingewickelte Text zentriert erscheint. Dies ist nicht der Fall, weil der DIV nicht auf mehrere Textzeilen schrumpft, die umbrochen werden. Eine Lösung besteht darin, begründeten Text zu verwenden, aber das ist nicht immer praktikabel, und die Ergebnisse können mit großen Lücken zwischen Wörtern abscheulich sein.

Ich verstehe, dass es keine Lösung gibt, das DIV in reinen CSS in einen umschlossenen Text zu verkleinern. Also meine Frage ist, wie würde man dies mit Javascript erreichen?

Dieses Spiel illustriert es: jsfiddle . Die beiden Wörter werden aufgrund der maximalen Breite nur knapp umschlossen, doch der DIV schrumpft nicht zu dem neu eingewickelten Text und hinterlässt einen unangenehmen rechten Rand. Ich würde das gerne eliminieren und die DIV-Größe auf den gewickelten Text setzen, vermutlich mit Javascript (da ich glaube nicht, dass eine Lösung in reinem CSS existiert).