Text umlaufen lassen

Angenommen, ich habe ein div mit etwas Text darin

<div id='page' style="width: 600px">
  <h1 style="border:2px black solid; font-size:42px;">Title</h1>
</div>

Der Rahmen für die Überschrift erstreckt sich alle 600 Pixel über die Seite, aber ich möchte, dass das Wort “Titel” genau hineinpasst. Ich weiß jedoch nicht im Voraus, wie viele Pixel das Wort breit ist, sodass ich beispielsweise den “Titel” nicht in ein div einfügen und seine Breite explizit festlegen kann.

Gibt es eine einfache Möglichkeit, einen Rahmen um Text herum anzupassen, der sich nicht vollständig horizontal über einen Bereich erstreckt?

Das ist weil h1 ist ein Blockelement, also erstreckt es sich über die Linie (oder die Breite, die Sie angeben).

Sie können festlegen, dass der Rahmen nur um den Text verläuft display:inline auf der h1

Beispiel: http://jsfiddle.net/jonathon/XGRwy/1/

Versuchen Sie, es in ein span-Element einzufügen:

<div id='page' style="width: 600px">
  <h1><span style="border:2px black solid; font-size:42px;">Title</span></h1>
</div>

Probieren Sie dies aus und sehen Sie, ob Sie das bekommen, was Sie anstreben:

<div id='page' style="width: 600px">
  <h1 style="border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;">Title</h1>
</div>

Der einfachste Weg, dies zu tun, besteht darin, die Anzeige zu einem Inline-Block zu machen

<div id='page' style="width: 600px">
  <h1 style="border:2px black solid; font-size:42px; display: inline-block;">Title</h1>
</div>

Wenn Sie dies tun, sollte es funktionieren

Nicht sicher, ob es das ist, was Sie wollen, aber Sie könnten das innere div zu einem Inline-Element machen. Auf diese Weise sollte der Rahmen nur um den Text gewickelt werden. Noch besser ist es, ein Inline-Element für Ihren Titel zu verwenden.

Lösung 1

<div id="page" style="width: 600px;">
    <div id="title" style="display: inline; border...">Title</div>
</div>

Lösung 2

<div id="page" style="width: 600px;">
    <span id="title" style="border...">Title</span>
</div>

Bearbeiten: Seltsam, SO interpretiert meine Code-Beispiele nicht korrekt als Block, also musste ich die Inline-Code-Methode verwenden.