CSS zum Stoppen des Textumbruchs unter dem Bild

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.

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}

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/

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

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

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

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%;
            }
        }