CSS zum Stoppen des Textumbruchs unter dem Bild

86

Ich habe das folgende Markup:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Ich möchte, dass der Text, wenn er umbrochen wird, nicht in die 'Spalte' für das Bild gelangt. Ich weiß, ich kann es mit einem machentable (was ich gemacht habe), aber das ist aus diesem Grund nicht praktikabel .

Ich habe folgendes ohne Erfolg versucht:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

Ich habe es auch versucht float: right.

Vielen Dank.

EDIT: Ich möchte, dass es so aussieht:

IMG   Text starts here and keeps going... and
      wrap starts here.

So nicht:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.
Nick
quelle
1
Kannst du deinen Code in jsfiddle einfügen?
Hardik
Ich denke, Sie müssen etwas klarer über Ihre Absichten hier sein. Wenn Sie Text nicht wickeln wollen , dann können Sie einfach white-space: nowrap;in li span {...}, aber ich den Eindruck, dass Sie etwas versuchen , anderes zu tun
My Head Hurts
@MyHeadHurts Entschuldigung - schien mir klar :) Ich möchte zwei Spalten in der Zeile. Die linken 20px sind für ein Bild. Der Rest ist für Text. Wenn der Text umbrochen wird, möchte ich, dass die zweite Zeile des Umbruchs 20px von links beginnt (unter der Stelle, an der der ursprüngliche Text begann).
Nick
1
Für Passanten müssen Sie sich nicht mit Breiten befassen, wie die akzeptierte Antwort nahelegt. Es ist viel einfacher: Erstellen Sie einen so genannten neuen Formatierungskontext . Siehe Joe Conlins Antwort. Weitere Hintergrundinformationen finden Sie bei mir.
Hqcasanova
1
@hqcasanova Für die Aufzeichnung wurde Dans Antwort 9 Monate vor der Veröffentlichung von Joe und 16 Monate vor Ihrer Antwort angenommen. Ich werde Dans Antwort nicht ablehnen, obwohl ich mich für das Hinzufügen von Alternativen bedanke.
Nick

Antworten:

35

Da diese Frage viele Ansichten gewinnt und dies die akzeptierte Antwort war, hatte ich das Bedürfnis, den folgenden Haftungsausschluss hinzuzufügen:

Diese Antwort war spezifisch für die Frage des OP (deren Breite in den Beispielen festgelegt wurde). Während es funktioniert, müssen Sie für jedes der Elemente, das Bild und den Absatz eine Breite haben. Sofern dies nicht Ihre Anforderung ist, empfehle ich die Verwendung der Lösung von Joe Conlin, die als weitere Antwort auf diese Frage veröffentlicht wird.

Das spanElement ist ein Inline-Element. Sie können seine Breite in CSS nicht ändern.

Sie können Ihrem Bereich das folgende CSS hinzufügen, damit Sie dessen Breite ändern können.

display: block;

Eine andere Möglichkeit, die normalerweise sinnvoller ist, besteht darin, ein <p>Element als übergeordnetes Element für Ihr Element zu verwenden <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Da <p>ist einblock Element handelt, können Sie seine Breite mithilfe von CSS festlegen, ohne etwas ändern zu müssen.

In beiden Fällen müssen Sie, da Sie jetzt ein Blockelement haben, das Bild schweben lassen, damit Ihr Text nicht vollständig unter Ihr Bild fällt.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS statt float:leftauf das Bild, können Sie auch setzen float:rightauf li pin diesem Fall aber, müssen Sie auchtext-align:left den Text neu auszurichten korrekt.

PSS Wenn Sie die erste Lösung gewählt haben, kein <p>Element hinzuzufügen , sollte Ihr CSS folgendermaßen aussehen:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
Dan
quelle
Das ist wirklich hilfreich. Ich habe das spanin ein pElement geändert . Dann schienen nur diese beiden den Trick zu tun : li p {margin-left: 40px} .fav_star {float: left}. Die Breite für das Bild wird durch das Bild selbst festgelegt, das pElement ist automatisch a blockund ich habe die Breite in Ruhe gelassen. Danke dafür.
Nick
2
Wenn Sie verwenden möchten, können display:blockSie auch ein verwenden, divda dies der Zweck ist (oder verwenden Sie ein, pwie Sie auch vorschlagen). Sie müssen den Text nicht doppelt umbrechen - wenn Sie einen verwenden p, können Sie den Text verlieren span.
Gareth
IMO, Sie sollten HTML nicht verwenden, um das Design Ihrer Seiten zu ändern. Dies ist der Job für CSS (Es gibt natürlich Ausnahmen, insbesondere wenn Sie browserübergreifende Kompatibilität benötigen). Ich glaube, dass es wichtiger ist, richtigen HTML-Code zu verwenden und eine "gute Semantik" zu haben. Daher würde ich divin diesem Fall kein a verwenden , pdas sinnvoller ist. Das zu verlieren spanist für mich ein bisschen trivial und hängt davon ab, wie Sie Ihre Inhalte gestalten.
Dan
Ein <span>in ein zu <p>wickeln ist Hexerei direkt aus Hogwartz! Funktioniert wunderbar!
Janus
250

Sehr einfache Antwort auf dieses Problem, das viele Leute zu fangen scheint:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Siehe Beispiel: http://jsfiddle.net/vandigroup/upKGe/132/

Joe Conlin
quelle
11
Dies ist die richtige Antwort auf diese Frage. Bei dieser Technik muss keine feste Breite für den Absatz festgelegt werden. Viel einfachere und einfachere Lösung. Funktioniert perfekt, auch in IE8.
Chocolata
4
Tatsächlich funktioniert dies nicht, wenn das Element, das den Text enthält, a ist span(der Fall des OP). Ein display: blockwürde für die benötigt werden span. Aber wenn ich das speichere, stimme ich zu, dass es eine viel elegantere Lösung ist. Falls sich jemand fragt, was die Magie dahinter steckt overflow: hidden, siehe meine Antwort unten.
Hqcasanova
7
Es ist nicht das Verhalten, das ich erwarten würde, aber das ist großartig.
Gavin
2
Für die Aufzeichnung kam diese Antwort 8 Monate nach der, die ich angekreuzt habe :)
Nick
2
Beeindruckend. Hat perfekt funktioniert. Ich kann nicht glauben, dass ich das noch nie gewusst habe.
SFlagg
25

Für diejenigen, die Hintergrundinformationen wünschen, ist hier ein kurzer Artikel, der erklärt, warum dies overflow: hiddenfunktioniert. Es hat mit dem sogenannten Blockformatierungskontext zu tun . Dies ist Teil der W3C-Spezifikation (dh kein Hack) und im Grunde genommen die Region, die von einem Element mit einem blockartigen Fluss belegt wird.

Erstellt bei jeder Anwendung overflow: hiddeneinen neuen Blockformatierungskontext. Es ist jedoch nicht die einzige Eigenschaft, die dieses Verhalten auslösen kann. Zitat einer Präsentation von Fiona Chan von der Sydney Web Apps Group:

  • float: links / rechts
  • Überlauf: versteckt / auto / scroll
  • Anzeige: Tabellenzelle und alle tabellenbezogenen Werte / Inline-Block
  • Position: absolut / fest
hqcasanova
quelle
1
Können Sie Ihrer Antwort einige Details aus diesem Artikel hinzufügen, falls der Link nicht mehr funktioniert?
Guten Morgen Australien! Danke für den Kommentar.
Hqcasanova
Dies ist hervorragend geeignet, um Codeblöcke anzuzeigen, die möglicherweise mit Bildern oder schwebenden Seitenleisten in der Nähe zu kämpfen haben.
AlexMA
Die ursprünglich beschriebene Technik funktioniert gut, obwohl es, wie andere gesagt haben, kein Verhalten ist, das ich erwarten würde. Ich sehe jedoch nicht, dass Float- oder Inline-Block-Arbeiten ohne Überlauf funktionieren, und natürlich haben tabellenbezogene Anzeigewerte und Positionen absolut oder fest andere Layout-Konsequenzen, die im Kontext möglicherweise akzeptabel sind oder nicht.
Enigment
3

Wenn Sie möchten, dass das Element margin-leftbearbeitet spanwird, müssen Sie es erstellen display: inline-blockoder display:blockauch.

Gareth
quelle
Wahrscheinlich brauchen Sie auch vertical-align: top;das Bild damit.
ThinkingStiff
2

Die Einstellung display:flexfür den Text hat bei mir funktioniert.

Mamrez
quelle
Dies scheint ein moderneres Äquivalent zur Einstellung zu sein overflow:auto. Ich bin sicher, dass es nicht in allen Situationen genau gleich funktioniert, aber es hat auch bei mir funktioniert.
Matt Browne
1

Wickeln Sie ein Div um das Bild und die Spanne und fügen Sie Folgendes wie folgt zu CSS hinzu:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

WENIGER

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
hawkeye126
quelle