Text umlaufen lassen

Lesezeit: 2 Minuten

Benutzeravatar von Steven Lu
Steven Lu

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>

Benutzeravatar von Ming Huang
Ming Huang

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

Benutzeravatar von Fidi
Fidi

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.

  • Aus irgendeinem Grund weigert sich Markdown, Codeblöcke zu formatieren, die in Listen verschachtelt sind (entweder ul oder ol).

    – David Thomas

    14. Januar 2011 um 12:03 Uhr

  • Danke für die Auskunft. Wusste nicht, dass der Parser daraus eine Liste gemacht hat. Ich habe es jetzt behoben 🙂

    – Fidi

    14. Januar 2011 um 12:31 Uhr

  • Aus irgendeinem Grund weigert sich Markdown, Codeblöcke zu formatieren, die in Listen verschachtelt sind (entweder ul oder ol).

    – David Thomas

    14. Januar 2011 um 12:03 Uhr

  • Danke für die Auskunft. Wusste nicht, dass der Parser daraus eine Liste gemacht hat. Ich habe es jetzt behoben 🙂

    – Fidi

    14. Januar 2011 um 12:31 Uhr

1436920cookie-checkText umlaufen lassen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy