CSS per interrompere il ritorno a capo del testo sotto l'immagine

Ho il seguente markup:

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

Lo voglio in modo che, se il testo va a capo, non vada nella "colonna" dell'immagine. So di poterlo fare con un table(cosa che stavo facendo) ma non è possibile per questo motivo .

Ho provato quanto segue senza successo:

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

Ho anche provato float: right.

Grazie.

EDIT: voglio che assomigli a questo:

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

Non così:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Poiché questa domanda sta guadagnando molte visualizzazioni e questa era la risposta accettata, ho sentito il bisogno di aggiungere la seguente dichiarazione di non responsabilità:

Questa risposta era specifica alla domanda del PO (che aveva la larghezza impostata negli esempi). Mentre funziona, richiede di avere una larghezza su ciascuno degli elementi, l'immagine e il paragrafo. A meno che questo non sia il tuo requisito, ti consiglio di utilizzare la soluzione di Joe Conlin che viene pubblicata come un'altra risposta a questa domanda.

L' spanelemento è un elemento in linea, non puoi modificarne la larghezza in CSS.

Puoi aggiungere il seguente CSS al tuo span in modo da poter cambiare la sua larghezza.

display: block;

Un altro modo, che di solito ha più senso, è usare un <p>elemento come genitore per il tuo <span>.

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

Poiché <p>è un blockelemento, puoi impostarne la larghezza utilizzando i CSS, senza dover modificare nulla.

Ma in entrambi i casi, poiché ora hai un elemento blocco, dovrai far fluttuare l'immagine in modo che il tuo testo non vada tutto sotto l'immagine.

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

PS Invece di float:leftsull'immagine, si può anche mettere float:rightsu li p, ma in tal caso, si dovrà anche text-align:leftriallineare il testo in modo corretto.

PSS Se sei andato avanti con la prima soluzione di non aggiungere un <p>elemento, il tuo CSS dovrebbe essere così:

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

Risposta molto semplice per questo problema che sembra catturare molte persone:

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

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

Vedi esempio: http://jsfiddle.net/vandigroup/upKGe/132/

Per coloro che desiderano alcune informazioni di base, ecco un breve articolo che spiega perché overflow: hiddenfunziona. Ha a che fare con il cosiddetto contesto di formattazione del blocco . Questo fa parte delle specifiche del W3C (cioè non è un hack) ed è fondamentalmente la regione occupata da un elemento con un flusso di tipo blocco.

Ogni volta che viene applicato, overflow: hiddencrea un nuovo contesto di formattazione del blocco. Ma non è l'unica proprietà in grado di innescare quel comportamento. Citando una presentazione di Fiona Chan del Sydney Web Apps Group:

• float: sinistra / destra
• overflow: nascosto / automatico / scorrimento
• display: tabella-cella e qualsiasi valore correlato alla tabella / blocco in linea
• posizione: assoluta / fissa

Se si desidera che il margin-leftlavorare su un spanelemento è necessario per renderlo display: inline-blocko display:blockpure.

l'impostazione display:flexper il testo ha funzionato per me.

Avvolgi un div attorno all'immagine e all'intervallo e aggiungi quanto segue al CSS in questo modo:

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

DI MENO

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

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